在jQuery中对多个选定项进行排序？

我正在尝试在jQuery可排序集中选择多个项目，然后将所选项目一起移动 。

这是我试图让它发挥作用的薄弱开端 。 这是代码：

HTML：

 
one
 
two
 
three
 
four
 
five
  

JS：

 $('.container div').draggable({ connectToSortable: '.container', //How do I drag all selected items? helper: function(e, ui) { return $('.selected'); } }); $('.container').sortable({ axis: 'y', //How do I sort all selected items? helper: function(e, ui) { return $('.selected'); } }); $('.container div').live('click', function(e) { $(this).toggleClass('selected'); }); 

CSS：

 body{background-color:#012;font-family:sans-serif;text-align:center;} div{margin:5px 0;padding:1em;} .container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;} .container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;} .container div:hover{background-color:#383838;color:#ccc;} .selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;} 

我不知道我是否朝着正确的方向前进。 我无法在网上找到这方面的例子。 只是 很多 相关的 问题 。 有谁知道怎么样？

例如，如果我从6的列表中选择了项目4和5.我希望能够将4和5拖动到集合的顶部以获得此订单 – 4 5 1 2 3 6 – 或者如果我选择5和1并将它们拖到底部 – 2 3 4 6 1 5

Answer 1

这似乎适用于multisortable插件。 代码如下。 或者看看jsFiddle 。

 // ctrl + click to select multiple $('.container').multisortable({ stop: function(e, ui) { var $group = $('.ui-multisort-grouped').not(ui.item); $group.clone().insertAfter($(ui.item)); $group.each(function() { $(this).removeClass('ui-multisort-grouped'); }); $group.remove(); } }); 

但是，如果multisortable与未来的jQuery版本打破了怎么办？

Answer 2

在这里修改我的答案（ 根据您的HTML和CSS ）：

1. 选择要排序的项目
2. 创建自定义帮助程序
3. 隐藏所选项目，直到排序完成
4. 根据选择调整助手和占位符的大小
5. 从当前位置手动分离所选项目，并在排序后将它们附加到新位置

6. 在步骤5之后显示隐藏的项目（ 撤消步骤3 ）

    $(function () { $('.container').on('click', 'div', function () { $(this).toggleClass('selected'); }); $(".container").sortable({ revert: true, helper: function (e, item) { if (!item.hasClass('selected')) item.addClass('selected'); var elements = $('.selected').not('.ui-sortable-placeholder').clone(); var helper = $('
   '); 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 currentHeight = ui.helper.height() var itemHeight = ui.item.height() + 32; // 32 = 16x2 padding ui.helper.height(currentHeight + (len * itemHeight)) ui.placeholder.height((len * itemHeight)) }, receive: function (e, ui) { ui.item.before(ui.item.data('items')); }, stop: function (e, ui) { ui.item.siblings('.selected').removeClass('hidden'); $('.selected').removeClass('selected'); } }); }); 

更新小提琴