#

Jump to Table of Contents

# Example: Multiple Lists

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

    });