开发者

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.

  1. select multiple items
  2. 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

  • 0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新问答

    问答排行榜