Sort multiple items at once using jquery.ui.sortable

Question

Did someone manage to sort multiple items at once using jquery.ui.sortable? We are working on a photo management application.

• select multiple items
• drag them to a new place.

thanks

Answer 1

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

And also I tried jQuery multisortable , it drags the selected items onto each other while dragging, which I don’t want.

So, I rolled out my own implementation and hope this will save others in due time.

Link to the script .

Source:

$( "#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 duplicated ui.item.remove(); } }); 

Answer 2

There is a jQuery UI plugin for this: https://github.com/shvetsgroup/jquery.multisortable

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

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

Answer 3

... or just define the "items" option for your multisort in this way (for example):

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

Answer 4

you can use shvetsgroup / jquery.multisortable command

but this will create a problem .. because js is for tags only

...

but set it up to use it, its very simple i will tell you how ????

download this .js first 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' }; 

above are lines from 107 to 112 ....

there you can see 'items:' li '

which uses the tag that you used to nest this image, as if you are using, or or anything you use, like this

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

and from 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 work with text fields inside these envelopes. You should also get rid of these lines.

  // 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 this line of comment ...

add a line code that looks for a text field 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 indicate the 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 a div .. instead you can use any tag you want ...

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

wishes