Using JQuery Sortable toArray with connectWith; how to get IDs of all items?
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.
精彩评论