sort multiple items at once with jquery.ui.sortable

Question

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

"did somebody manage to sort multiple items at once with jquery.ui.sortable"- how do you want to sort them..? do you visually want to drag all the selected items? or just manipulate the dom it is unclear what you want to do... — T J
– T J, Commented Jun 28, 2014 at 11:47

lixu · Accepted Answer · 2014-02-06 09:11:19Z

18

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

answered Feb 6, 2014 at 9:11

lixu

1912 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James F Over a year ago

Thanks! This really helped me, I made a few minor changes to your fiddle so that you can click/unclick items you want to drag which is was I needed - jsfiddle.net/4xyf59pk

Robert Over a year ago

The clue to hide and delete later was wonderful, and solved my problem.

neochief · Accepted Answer · 2013-09-16 16:34:19Z

4

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

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

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

answered Sep 16, 2013 at 16:34

neochief

5674 silver badges6 bronze badges

Comments

Ganesh Gaxy · Accepted Answer · 2014-07-29 11:56:26Z

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

Baptiste LARVOL-SIMON · Accepted Answer · 2017-05-30 23:10:50Z

-1

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

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

answered May 30, 2017 at 23:10

Baptiste LARVOL-SIMON

2181 silver badge8 bronze badges

Collectives™ on Stack Overflow

sort multiple items at once with jquery.ui.sortable

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related