Example: Simple Sortable List

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>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
        <li>Item #6</li>
        <li>Item #7</li>
        <li>Item #8</li>
        <li>Item #9</li>
        <li>Item #10</li>
    </ul>
</div>

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

#demo li {
    list-style-type: none;
    padding: 3px;
    width: 150px;
    border: 1px solid black;
    margin: 3px;
    background-color: #8DD5E7;
    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'

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