使用jquery.ui.sortable一次排序多个项目 [英] sort multiple items at once with jquery.ui.sortable

问题描述

有人用jquery.ui.sortable一次对多个项目进行了排序吗? 我们正在开发一个照片管理应用.

did somebody manage to sort multiple items at once with jquery.ui.sortable? we are working on a photo managing app.

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

感谢

推荐答案

我也有类似的要求，但是公认的答案中的解决方案有一个错误.它说出类似"insertBefore of null"的字样，因为它删除了节点.

I had a similar requirement, but the solution in the accepted answer has a bug. It says something like "insertBefore of null", because it removes the nodes.

我也尝试过 jQuery multisortable ，它在拖动时将选定的项堆叠在一起，这不是我想要的.

And also i tried jQuery multisortable, it stacks the selected items on top of each other when dragging, which is not what i want.

所以我推出了自己的实现，希望它可以节省其他时间.

So I rolled out my own implementation and hope it will save others some time.

小提琴链接.

源代码:

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

这篇关于使用jquery.ui.sortable一次排序多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！