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