This example makes multiple sortable lists that are fully joined together.
List 1
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
List 2
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
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="yui3-g">
<div class="yui3-u-1-2">
<h4 class="no-toc">List 1</h4>
<ul id="list1">
<li class="one">1</li>
<li class="one">2</li>
<li class="one">3</li>
<li class="one">4</li>
<li class="one">5</li>
<li class="one">6</li>
<li class="one">7</li>
<li class="one">8</li>
<li class="one">9</li>
<li class="one">10</li>
</ul>
</div>
<div class="yui3-u-1-2">
<h4 class="no-toc">List 2</h4>
<ul id="list2">
<li class="two">A</li>
<li class="two">B</li>
<li class="two">C</li>
<li class="two">D</li>
<li class="two">E</li>
<li class="two">F</li>
<li class="two">G</li>
<li class="two">H</li>
<li class="two">I</li>
<li class="two">J</li>
</ul>
</div>
</div>
Now we give the lists some CSS to make them visible.
#demo h4 {
margin: 10px auto;
width: 165px;
text-align: center;
}
#demo ul {
margin: 0 auto;
width: 165px;
padding: 0;
}
#demo li {
list-style-type: none;
padding: 3px;
width: 150px;
margin: 6px;
font-size: 114%;
-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
cursor: move;
}
#demo li.one {
background-color: #B6BFDA;
border: 1px solid #7E869D;
}
#demo li.two {
background-color: #F2C89F;
border: 1px solid #B19C87;
text-align: center;
}
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'
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'
});
});
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'
});
list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
constrain2node: '#demo'
});
Applying the Plugin.DDConstrained to the Sortable instance.
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'
});
list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
constrain2node: '#demo'
});
list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
constrain2node: '#demo'
});
});
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 <--
Putting it together
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'
});
list1.join(list2);
});