sort multiple items at once with jquery.ui.sortable_问答_开发者

sort multiple items at once with jquery.ui.sortable

开发者 https://www.devze.com 2023-02-23 05:51 出处：网络

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

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

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

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

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

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

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

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

sort multiple items at once with jquery.ui.sortable

精彩评论

关注公众号

热门标签

图文推荐

sort multiple items at once with jquery.ui.sortable

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：