Question

有人设法使用jquery.ui.sortable一次排序多个项目吗？我们正在制作照片管理应用程序。

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

感谢名单

Answer 1

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

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

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

Fiddle Link

源代码：

$( "#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

...或者只是定义一个＆＃39;项目＆＃39;这种多种类的选项（例如）：

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

Answer 4

你可以使用shvetsgroup / jquery.multisortable

但它会产生问题..因为，js仅适用于

标签......

但要自定义它以使用它，它非常简单我会告诉你如何????

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

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

$.fn.multiselectable.defaults = {
    click: function(event, elem) {},
    mousedown: function(event, elem) {},
    selectedClass: 'selected',
    items: 'li'
};

以上是从107到112的行......

在那里你可以看到＆＃34;项目：＆＃39; li＆＃39;

使用你用来封装那些图像的标签，就像你正在使用的那样，或者你正在使用的任何东西都是这样的

$.fn.multiselectable.defaults = {
    click: function(event, elem) {},
    mousedown: function(event, elem) {},
    selectedClass: 'selected',
    items: 'div' // or any tag you want...
};

和249到254

selectedClass: 'selected',
    placeholder: 'placeholder',
    items: 'li'
};

}（jQuery的）;

更改线路＆＃34;项目：＆＃39;李＆＃39; ＆＃34;用你的标签

selectedClass: 'selected',
    placeholder: 'placeholder',
    items: 'div'  // or anything else
};

}（jQuery的）;

如果您正在处理这些信封内的文本框......您也必须摆脱这些线条

        // If no previous selection found, start selecting from first selected item.
        prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();

在该评论栏后......

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

像这样......

        // If no previous selection found, start selecting from first selected item.
item.children("input").focus(); // customize this code to get your element focus...
        prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();

并指示所选标签或元素......使用这样的样式

        div { margin: 2px 0; cursor: pointer; }
        div.selected { background-color: orange }
        div.child { margin-left: 20px; }

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

希望能帮到你....如果不是......再读一遍......再问一遍......

愿望

使用jquery.ui.sortable一次排序多个项目

4 个答案: