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

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 = $('<div/>'); 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'); } }); }); 

更新小提琴