sort multiple items at once with jquery.ui.sortable

问题

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

select multiple items
drag them to a new location.

thanx

回答1:

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.

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.

Fiddle Link.

Source code:

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

回答2:

There's a jQuery UI plugin for that: https://github.com/shvetsgroup/jquery.multisortable

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

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

回答3:

... or just define a 'items' option to your multisortable that way (for example) :

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

回答4:

you can use shvetsgroup/jquery.multisortable

but it will create problem.. because, that js is designed only for

tags...

but customize it to use it, its very simple i'll tell you how????

at first download that .js and use it in your program...

step 1. open the js file...now edit the following lines...

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

the above are lines from 107 to 112....

there you can see "items: 'li'

in that use your tag which you are used to enclose those image like if you are using, or or anything you are using like this

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

and 249 to 254

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

}(jQuery);

change the line " item:'li' " with your tag like this

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

}(jQuery);

if you are working on textboxes inside those envelopes.. you have to get rid of these lines too

        // 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();

after that comment line...

add a line code that search textbox or check box or any interaction element inside it...

like this..

        // 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();

and also to indicate selected tags or elements... use styles like this

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

actually i used div.. instead of that you can use any tag you wish...

hope will help u.... if it is not... read again.. and ask again....

wishes

来源：https://stackoverflow.com/questions/5596748/sort-multiple-items-at-once-with-jquery-ui-sortable

标签

jquery-ui-sortable