YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Sortable List Utility: Multiple Sortable Lists - Separate

## Sortable List Utility: Multiple Sortable Lists - Separate

This example makes multiple sortable lists that are separate from one another and do not interact with each other.

View example in new window.

- 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>

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

#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'

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

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

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

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

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings