使用 jquery.ui.sortable 同时对多个项目进行排序

Question

有人设法使用 jquery.ui.sortable 同时对多个项目进行排序吗？ 我们正在开发一个照片管理应用程序。

1. 选择多个项目
2. 将它们拖到新位置。

谢谢

Answer 1

我有类似的要求，但接受的答案中的解决方案有一个错误。它说类似“insertBefore of null”，因为它删除了节点。

我还尝试了 jQuery multisortable，它在拖动时将所选项目堆叠在一起，这不是我想要的。

所以我推出了自己的实现，希望它能为其他人节省一些时间。

小提琴链接。

源代码：

$( "#sortable" ).sortable({
    // force the cursor position, or the offset might be wrong
    cursorAt: {
        left: 50,
        top: 45
    },
    helper: function (event, item) {
        // make sure at least one item is selected.
        if (!item.hasClass("ui-state-active")) {
            item.addClass("ui-state-active").siblings().removeClass("ui-state-active");
        }

        var $helper = $("<li><ul></ul></li>");
        var $selected = item.parent().children(".ui-state-active");
        var $cloned = $selected.clone();
        $helper.find("ul").append($cloned);

        // hide it, don't remove!
        $selected.hide();

        // save the selected items
        item.data("multi-sortable", $cloned);

        return $helper;
    },

    stop: function (event, ui) {
        // add the cloned ones
        var $cloned = ui.item.data("multi-sortable");
        ui.item.removeData("multi-sortable");

        // append it
        ui.item.after($cloned);

        // remove the hidden ones
        ui.item.siblings(":hidden").remove();

        // remove self, it's duplicated
        ui.item.remove();
    }
});

Answer 2

有一个 jQuery UI 插件：https://github.com/shvetsgroup/jquery.multisortable

jsFiddle： http://jsfiddle.net/neochief/KWeMM/

$('ul.sortable').multisortable();

Answer 3

您可以使用 shvetsgroup/jquery.multisortable

但它会产生问题..因为，该 js 仅为

标签设计...

但是自定义它来使用它，它非常简单，我会告诉你如何？？？

首先下载该 .js 并在您的程序中使用它...

第 1 步.打开 js 文件...现在编辑以下行...

$.fn.multiselectable.defaults = {
    单击：函数（事件，elem）{}，
    mousedown: 函数(事件, elem) {},
    selectedClass: '已选择',
    项目：“李”
};

上面是从107到​​112行....

在那里你可以看到“items: 'li'

使用您的标签来封闭这些图像，例如您正在使用的图像，或者您正在使用的任何东西

$.fn.multiselectable.defaults = {
    单击：函数（事件，elem）{}，
    mousedown: 函数(事件, elem) {},
    selectedClass: '已选择',
    items: 'div' // 或任何你想要的标签...
};

以及 249 至 254

selectedClass: '已选择',
    占位符：'占位符'，
    项目：“李”
};

}(jQuery);

使用您的标签更改“ item:'li' ”行，如下所示

selectedClass: '选定',
    占位符：'占位符'，
    items: 'div' // 或其他任何内容
};

}(jQuery);

如果您正在处理这些信封内的文本框..您也必须删除这些行

 // 如果没有找到先前的选择，则从第一个选定的项目开始选择。
        上一个 = 上一个长度 ?上一个 : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();

在该评论行之后...

添加一行代码来搜索文本框或复选框或其中的任何交互元素...

像这样..

 // 如果没有找到先前的选择，则从第一个选定的项目开始选择。
item.children("输入").focus(); // 自定义此代码以获得元素焦点...
        上一个 = 上一个长度 ?上一个 : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();

还可以指示选定的标签或元素...使用这样的样式

 div { 边距：2px 0;光标：指针； }
        div.selected { 背景颜色：橙色 }
        div.child { 左边距：20px; }

实际上我使用了 div..而不是你可以使用任何你想要的标签...

希望能帮助你……如果不是……再读一遍……再问一遍……

愿望

Answer 4

...或者只是以这种方式为您的多排序定义一个“items”选项（例如）：

$('table tbody').multisortable({
  items: 'tr'
});