Sortable List Utility: Multiple Sortable Lists - Full Join
This example makes multiple sortable lists that are fully joined together.
- 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
- 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
Setting up the list
First we need to create the HTML structure for the lists. Since Sortable uses Y.DD.Delegate, we need to set up the delegation containers (#list1, #lists2) and the list items (li).
<div id="demo" class="yui-g"> <div class="yui-u first"> <ul id="list1"> <li>Item #1.1</li> <li>Item #1.2</li> <li>Item #1.3</li> <li>Item #1.4</li> <li>Item #1.5</li> <li>Item #1.6</li> <li>Item #1.7</li> <li>Item #1.8</li> <li>Item #1.9</li> <li>Item #1.10</li> </ul> </div> <div class="yui-u"> <ul id="list2"> <li>Item #2.1</li> <li>Item #2.2</li> <li>Item #2.3</li> <li>Item #2.4</li> <li>Item #2.5</li> <li>Item #2.6</li> <li>Item #2.7</li> <li>Item #2.8</li> <li>Item #2.9</li> <li>Item #2.10</li> </ul> </div> </div>
<div id="demo" class="yui-g"> <div class="yui-u first"> <ul id="list1"> <li>Item #1.1</li> <li>Item #1.2</li> <li>Item #1.3</li> <li>Item #1.4</li> <li>Item #1.5</li> <li>Item #1.6</li> <li>Item #1.7</li> <li>Item #1.8</li> <li>Item #1.9</li> <li>Item #1.10</li> </ul> </div> <div class="yui-u"> <ul id="list2"> <li>Item #2.1</li> <li>Item #2.2</li> <li>Item #2.3</li> <li>Item #2.4</li> <li>Item #2.5</li> <li>Item #2.6</li> <li>Item #2.7</li> <li>Item #2.8</li> <li>Item #2.9</li> <li>Item #2.10</li> </ul> </div> </div>
Now we give the lists some CSS to make them visible.
#demo { float: none; border: 1px solid black; } #demo li { list-style-type: none; padding: 3px; width: 150px; border: 1px solid black; margin: 3px; background-color: #8DD5E7; }
#demo { float: none; border: 1px solid black; } #demo li { list-style-type: none; padding: 3px; width: 150px; border: 1px solid black; margin: 3px; background-color: #8DD5E7; }
Setting up the YUI Instance
Now we need to create our YUI instance and tell it to load the sortable module.
In this example we are also going to attach a DD plugin to the Sortable instances.
YUI().use('dd-constrain', 'sortable'
YUI().use('dd-constrain', 'sortable'
Making the lists draggable
Now that we have a YUI instance with the sortable module, we need to instantiate a Sortable instance on each of the lists.
YUI().use('dd-constrain', 'sortable', function(Y) { var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1' }); var list2 = new Y.Sortable({ container: '#list2', nodes: 'li', opacity: '.1' }); });
YUI().use('dd-constrain', 'sortable', function(Y) { var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1' }); var list2 = new Y.Sortable({ container: '#list2', nodes: 'li', opacity: '.1' }); });
Joining the lists
Joining the lists is as simple as calling the join method on one list passing in another list. By default, we use a full join which joins both lists both ways.
You can optionally specify the join type: inner or outer. The moveType can also be specified on the list: swap, move or copy. swap is the default, as seen in this example.
list1.join(list2); //Full join <-- both ways --> list1.join(list2, 'outer'); //Outer join --> one way --> list1.join(list2, 'inner'); //Inner join <-- one way <--
list1.join(list2); //Full join <-- both ways --> list1.join(list2, 'outer'); //Outer join --> one way --> list1.join(list2, 'inner'); //Inner join <-- one way <--
Applying a DD plugin
Since Sortable uses DD.Delegate, there is a dd instance available after instantiation.
The DD.Delegate reference is found on the .delegate property of the Sortable.
This DD.Delegate instance has a DD.Drag instance bound to the dd property on the DD.Delegate
list1.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' });
list1.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' });
Applying the Plugin.DDConstrained to the Sortable instance.
var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1' }); list1.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' });
var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1' }); list1.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' });
Full Example Source
YUI().use('dd-constrain', 'sortable', function(Y) { var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1' }); 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); });
YUI().use('dd-constrain', 'sortable', function(Y) { var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1' }); 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); });

