#

Jump to Table of Contents

# Example: Simple Sortable List

Making a simple sortable list.

- 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 (`li`).

    <div id="demo">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>

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

    #demo li {
        list-style-type: none;
        padding: 3px;
        margin: 6px;
        width: 150px;
        font-size: 114%;
        background-color: #B6BFDA;
        border: 1px solid #7E869D;
        -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;
    }

### 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: 'li',
            opacity: '.1'
        });
    });