jQuery UI Sortable: Multi-item select

Question

Я бы хотел (с помощью оператора клавиатуры) выбрать несколько элементов в неупорядоченном списке и перетащить их в другую точку в том же списке с помощью jQuery Sortable.

Answer 1

1. Выберите элементы для сортировки
2. Создание пользовательского помощника
3. Скрыть выбранные элементы до сортировки не будет сделано
4. Изменение размера заполнителя в соответствии с выбором
5. вручную отделить выбранные элементы из текущего положения и прикрепите их к новому положению после сортировки
6. Показать скрытые объекты (отменить шаг 3) после шага5

Вот как я сделал (Изменение моего answer для этого 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>

(Выбор нескольких элементов, нажав каждый из них в демо)