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