在jQuery中排序多个选定项目可排序？

Question

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

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

HTML:

<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
</div>

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版本呢？