开发者

Using JQuery Sortable toArray with connectWith; how to get IDs of all items?

开发者 https://www.devze.com 2023-03-10 01:02 出处:网络
Given n lists of m items that are Sortable across lists, how can I get an overall list of IDs for all items in all lists from top to bottom (including both sort participants and non-participants)?

Given n lists of m items that are Sortable across lists, how can I get an overall list of IDs for all items in all lists from top to bottom (including both sort participants and non-participants)?

My list of items looks something like this:

Category 1
- (id=a) Item 1A
- (id=b) Item 1B
Category 2
- (id=c) Item 2A
- (id=d) Item 2B
Category开发者_开发知识库 3
- (id=e) Item 3A
- (id=f) Item 3B

These items are Sortable across categories and connected via connectWith (see below for code). Item 2B, for example, may be dragged and dropped into Category 1.

I can get as far as using update and toArray to get IDs for the section being dragged from and the section being dragged to, but is there a clean way to access all of them? Do I need to build it manually somehow? How can I get a list of all the IDs in their current sort order?

If I drag Item 2B to the first position in Category 1, for example, I can get two array lists for two fires of the update, the first containing "d" (the list I moved from) and the second containing "c, a, b" (the list I moved to). How can I get a list containing "c, a, b, d, e, f"? This is happening on a button click, so I'm not restricted to update, if there's a better mechanism through which to get the information.

Here's a JFIDDLE demo of what I have so far.


There doesn't seem to be a native function to do this, so I created a demo that iterates all the .sortable elements to create one array and log to the console in Chrome or Firefox with Firebug. I also changed the update to receive so it only fires once (see jQueryUI sortable documentation).


Another way to do it is to just loop through all the sortable child elements and record their order.

$('.sortable').sortable({ 
    items: '> tr.child',
    connectWith: $('tbody'),
    receive: function(event, ui) {
        var myOrder = new Array();
        $(".sortable tr.child").each(function() {
            myOrder.push($(this).attr("id"));
        });
        console.log(myOrder.toString());  
    }
});

This has the added benefit of allowing adding and deleting sortable containers at any time -- this script will work regardless.

0

精彩评论

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