jQuery UI Sortable: Multi-item select

Question

Je voudrais (via un opérateur de clavier) sélectionner plusieurs éléments dans une liste non ordonnée et les faire glisser vers un autre point dans la même liste avec jQuery Sortable.

Answer 1

1. Sélectionnez les éléments à trier
2. Créer une aide personnalisée
3. Masquer les éléments sélectionnés jusqu'à ce tri est fait
4. Redimensionner l'espace réservé selon la sélection
5. détacher manuellement les éléments sélectionnés de la position actuelle et attachez-les à la nouvelle position après le tri
6. Afficher les éléments masqués (undo étape 3) après l'étape 5

Voilà comment je l'ai fait (Modifier mon answer pour cette question):

$(function() { 
 
    $('ul').on('click', 'li', function() { 
 
    $(this).toggleClass('selected'); 
 
    }); 
 

 
    $("ul").sortable({ 
 
    revert: true, 
 
    helper: function(e, item) { 
 
     if (!item.hasClass('selected')) item.addClass('selected'); 
 
     var elements = $('.selected').not('.ui-sortable-placeholder').clone(); 
 
     var helper = $('<ul/>'); 
 
     item.siblings('.selected').addClass('hidden'); 
 
     return helper.append(elements); 
 
    }, 
 
    start: function(e, ui) { 
 
     var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder'); 
 
     ui.item.data('items', elements); 
 
     var len = ui.helper.children().length; 
 
     var height = ui.item.height() + 5; 
 
     ui.helper.height((len * height)) 
 
     ui.placeholder.height((len * height)) 
 
    }, 
 
    receive: function(e, ui) { 
 
     ui.item.before(ui.item.data('items')); 
 
    }, 
 
    stop: function(e, ui) { 
 
     ui.item.siblings('.selected').removeClass('hidden'); 
 
     $('.selected').removeClass('selected'); 
 
    } 
 
    }); 
 

 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#sortable { 
 
    width: 300px; 
 
    padding: 5px; 
 
    margin-right: 100px; 
 
    background: #eee; 
 
    border: 1px solid black; 
 
} 
 
ul li { 
 
    width: 250px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    cursor: move; 
 
    background-color: white; 
 
    list-style-type: none; 
 
} 
 
.selected { 
 
    background: red !important; 
 
} 
 
.hidden { 
 
    display: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<ul id="sortable"> 
 
    <li>Item #1</li> 
 
    <li>Item #2</li> 
 
    <li>Item #3</li> 
 
    <li>Item #4</li> 
 
    <li>Item #5</li> 
 
</ul>

(sélectionner plusieurs éléments en cliquant sur chacun d'eux dans la démo)