[ACCEPTED]-sort multiple items at once with jquery.ui.sortable-jquery-ui-sortable
I had a similar requirement, but the solution 8 in the accepted answer has a bug. It says 7 something like "insertBefore of null", because 6 it removes the nodes.
And also i tried jQuery multisortable, it 5 stacks the selected items on top of each 4 other when dragging, which is not what i 3 want.
So I rolled out my own implementation 2 and hope it will save others some time.
Source 1 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();
}
});
There's a jQuery UI plugin for that: https://github.com/shvetsgroup/jquery.multisortable
jsFiddle: http://jsfiddle.net/neochief/KWeMM/
$('ul.sortable').multisortable();
0
... or just define a 'items' option to your 1 multisortable that way (for example) :
$('table tbody').multisortable({
items: 'tr'
});
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.