#

Jump to Table of Contents

# Example: Floated List

Making a simple sortable list with floated nodes.

1 2 3 4 5 6 7 8 9 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>1</em>
        <em>2</em>
        <em>3</em>
        <em>4</em>
        <em>5</em>
        <em>6</em>
        <em>7</em>
        <em>8</em>
        <em>9</em>
        <em>10</em>
    </div>

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

    #demo {
        height: 200px;
    }
    #demo em {
        display: block;
        float: left;
        font-style:normal;
        text-align:center;
        width: 80px;
        height: 40px;
        line-height:40px;
        border: 1px solid #000;
        margin: 6px 0;
        color:#99CCCC;
        font-size:150%;
        -moz-box-shadow:4px 4px 7px rgba(0,0,0, 0.4);
        -webkit-box-shadow:4px 4px 7px rgba(0,0,0, 0.4);
        box-shadow:4px 4px 7px rgba(0,0,0, 0.4);
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        cursor: move;
    }

### Setting Up the YUI Instance

Now we need to create our YUI instance and tell it to load the `sortable` module.

    YUI().use('sortable', function (Y) {
        // Code here.
    });

### 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({
            container: '#demo',
            nodes: 'em',
            opacity: '.1'
        });
    });