Example: Floated 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 (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'

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