YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Sortable List Utility: Simple Sortable List - Floated Nodes

## Sortable List Utility: Simple Sortable List - Floated Nodes

Making a simple sortable list with floated nodes.

View example in new window.

Item #1 Item #2 Item #3 Item #4 Item #5 Item #6 Item #7 Item #8 Item #9 Item #10

### Setting up the list

First we need to create the HTML structure for the list. Since `Sortable` uses `Y.DD.Delegate`, we need to set up a delegation container (`#demo`) and the list items (`em`).

    <div id="demo">    <em>Item #1</em>    <em>Item #2</em>    <em>Item #3</em>    <em>Item #4</em>    <em>Item #5</em>    <em>Item #6</em>    <em>Item #7</em>    <em>Item #8</em>    <em>Item #9</em>    <em>Item #10</em></div>

    <div id="demo">
        <em>Item #1</em>
        <em>Item #2</em>
        <em>Item #3</em>
        <em>Item #4</em>
        <em>Item #5</em>
        <em>Item #6</em>
        <em>Item #7</em>
        <em>Item #8</em>
        <em>Item #9</em>
        <em>Item #10</em>
    </div>

<div id="demo"> <em>Item #1</em> <em>Item #2</em> <em>Item #3</em> <em>Item #4</em> <em>Item #5</em> <em>Item #6</em> <em>Item #7</em> <em>Item #8</em> <em>Item #9</em> <em>Item #10</em> </div>

Now we give the list some CSS to make it visible.

        #demo {        border: 1px solid black;        height: 200px;    }    #demo em {        display: block;        float: left;        padding: 3px;        width: 150px;        border: 1px solid black;        margin: 3px;        background-color: #8DD5E7;    }

        #demo {
            border: 1px solid black;
            height: 200px;
        }
        #demo em {
            display: block;
            float: left;
            padding: 3px;
            width: 150px;
            border: 1px solid black;
            margin: 3px;
            background-color: #8DD5E7;
        }

#demo { border: 1px solid black; height: 200px; } #demo em { display: block; float: left; 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.

    YUI().use('sortable'

    YUI().use('sortable'

YUI().use('sortable'

### Making the list draggable

Now that we have a YUI instance with the `sortable` module, we need to instantiate the `Sortable` instance on the list.

    YUI().use('sortable', function(Y) {    var sortable = new Y.Sortable({        //The container of the list        container: '#demo',        //The items to make sortable        nodes: 'em',        //Set the opacity of the sorted item to make it        //almost invisible        opacity: '.1'    }); });

    YUI().use('sortable', function(Y) {
        var sortable = new Y.Sortable({
            //The container of the list
            container: '#demo',
            //The items to make sortable
            nodes: 'em',
            //Set the opacity of the sorted item to make it
            //almost invisible
            opacity: '.1'
        });

    });

YUI().use('sortable', function(Y) { var sortable = new Y.Sortable({ //The container of the list container: '#demo', //The items to make sortable nodes: 'em', //Set the opacity of the sorted item to make it //almost invisible opacity: '.1' }); });

Copyright © 2010 Yahoo! Inc. All rights reserved.

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