Example: Multiple Lists

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', function (Y) {
    // Code here.
});

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'
    });

});