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>

（通过点击演示他们每个人选择多个项目）