Sortable List Utility: Multiple Sortable Lists - Outer Join
This example makes multiple sortable lists that are outer joined together. In the example below you will see 2 lists. Both lists are sortable, but List #1 can move its items into List #2 and they become sortable. However, List #2 can not move its items into List #1.
List #1
- Item #1.1
- Item #1.2
- Item #1.3
- Item #1.4
- Item #1.5
- Item #1.6
- Item #1.7
- Item #1.8
- Item #1.9
- Item #1.10
List #2
- Item #2.1
- Item #2.2
- Item #2.3
- Item #2.4
- Item #2.5
- Item #2.6
- Item #2.7
- Item #2.8
- Item #2.9
- Item #2.10
Note: When using an outer or inner joined list, you must pick a moveType of 'move' or 'copy', the default 'swap' won't give you the results you expect.
This example assumes that you have seen the Multiple Sortable Lists - Full Join example and continues from there.
Joining the lists
After creating the Sortable lists, we will do an outer join. Joining list1 with list2 on the outside.
But first we need to choose a moveType. The moveType will determine how an item is moved from one list to another: swap, move or copy. For this example we are using the move type.
var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1', moveType: 'move' //This is important });
list1.join(list2, 'outer');
Full Example Source
YUI().use('dd-constrain', 'sortable', function(Y) { var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1', moveType: 'move' }); list1.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' }); var list2 = new Y.Sortable({ container: '#list2', nodes: 'li', opacity: '.1' }); list2.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' }); list1.join(list2, 'outer'); });
