Sortable: Multiple Sortable Lists - Separate
This example makes multiple sortable lists that are separate from one another and do not interact with each other.
- 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' }); });
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' }); });
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' }); });