YUI 3.x Home -

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

  1. <div id="demo" class="yui-g">
  2.     <div class="yui-u first">
  3.         <ul id="list1">
  4.             <li>Item #1.1</li>
  5.             <li>Item #1.2</li>
  6.             <li>Item #1.3</li>
  7.             <li>Item #1.4</li>
  8.             <li>Item #1.5</li>
  9.             <li>Item #1.6</li>
  10.             <li>Item #1.7</li>
  11.             <li>Item #1.8</li>
  12.             <li>Item #1.9</li>
  13.             <li>Item #1.10</li>
  14.         </ul>
  15. 	</div>
  16.     <div class="yui-u">
  17.         <ul id="list2">
  18.             <li>Item #2.1</li>
  19.             <li>Item #2.2</li>
  20.             <li>Item #2.3</li>
  21.             <li>Item #2.4</li>
  22.             <li>Item #2.5</li>
  23.             <li>Item #2.6</li>
  24.             <li>Item #2.7</li>
  25.             <li>Item #2.8</li>
  26.             <li>Item #2.9</li>
  27.             <li>Item #2.10</li>
  28.         </ul>
  29. 	</div>
  30. </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.

  1.     #demo {
  2.         float: none;
  3.         border: 1px solid black;
  4.     }
  5.     #demo li {
  6.         list-style-type: none;
  7.         padding: 3px;
  8.         width: 150px;
  9.         border: 1px solid black;
  10.         margin: 3px;
  11.         background-color: #8DD5E7;
  12.     }
    #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.

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

  1. YUI().use('dd-constrain', 'sortable', function(Y) {
  2.     var list1 = new Y.Sortable({
  3.         container: '#list1',
  4.         nodes: 'li',
  5.         opacity: '.1'
  6.     });
  7.  
  8.     var list2 = new Y.Sortable({
  9.         container: '#list2',
  10.         nodes: 'li',
  11.         opacity: '.1'
  12.     });
  13. });
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 

  1.     list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
  2.         constrain2node: '#demo'
  3.     });
    list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#demo'
    });

Applying the Plugin.DDConstrained to the Sortable instance.

  1.     var list1 = new Y.Sortable({
  2.         container: '#list1',
  3.         nodes: 'li',
  4.         opacity: '.1'
  5.     });
  6.     list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
  7.         constrain2node: '#demo'
  8.     });
    var list1 = new Y.Sortable({
        container: '#list1',
        nodes: 'li',
        opacity: '.1'
    });
    list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#demo'
    });

Full Example Source

  1. YUI().use('dd-constrain', 'sortable', function(Y) {
  2.     var list1 = new Y.Sortable({
  3.         container: '#list1',
  4.         nodes: 'li',
  5.         opacity: '.1'
  6.     });
  7.     list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
  8.         constrain2node: '#demo'
  9.     });
  10.  
  11.     var list2 = new Y.Sortable({
  12.         container: '#list2',
  13.         nodes: 'li',
  14.         opacity: '.1'
  15.     });
  16.     list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
  17.         constrain2node: '#demo'
  18.     });
  19. });
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'
    });
});

More Sortable List Utility Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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