对jQuery sortable中的多个选定项目进行排序？答案

【问题标题】：Sort multiple selected items in jQuery sortable?对jQuery sortable中的多个选定项目进行排序？
【发布时间】：2011-12-14 22:48:14
【问题描述】：

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

这是我的弱点beginning of an attempt to make it work。这是代码：

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;}

我不知道我是否朝着正确的方向前进。我在网上的任何地方都找不到这样的例子。 Just lots of related questions .有人知道怎么做吗？

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

【问题讨论】：

向问题添加代码以保持 SO 自包含和可搜索。
我认为this 是一个很好的起点。默认排序不能按要求工作，但也许您可以修改它:)。小提琴是here。例如here。
@dzejkej 谢谢。我之前看到过，但我担心它会在未来的 jquery 版本中中断，所以我通过了它。我很高兴你再次引起我的注意。我认为它可能会奏效。如果它将来坏了，我会向你寻求帮助:)。
谢谢@Merlyn。从现在开始，我将包含代码。

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案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();
    }
});

但是如果在未来的 jQuery 版本中可以进行多排序 breaks 呢？

【讨论】：

jQuery 框架不会随意更改 API，我相信如果发生更改，他们会提供迁移指南，所以我不会太担心它会损坏 :)。干得好！
那个插件已经无人维护了，这里分叉了github.com/iamvery/jquery.multisortable

【解决方案2】：

修改我的答案here（根据你的HTML 和CSS）：

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

在第 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');
    }
  });
});

Updated Fiddle

【讨论】：