Sortable: 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 });
var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1', moveType: 'move' //This is important });
list1.join(list2, 'outer');
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'); });
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'); });