jQuery UI可排序：多項選擇

Question

我想（通過鍵盤操作員）在無序列表中選擇多個項目，並使用jQuery Sortable將它們拖到同一列表中的另一個點。

Answer 1

1. 選擇項目進行排序
2. 創建一個自定義幫助
3. 隱藏選定的項目，直到排序完成
4. 根據選擇調整中的佔位符
5. 手動從當前位置分離選定項目，在排序後將它們附加到新位置
6. 在步驟5之後顯示隱藏項目（撤消步驟3）

這是我如何做（修改我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>

（通過點擊演示他們每個人選擇多個項目）