Making a simple sortable list.
- Item #1
- Item #2
- Item #3
- Item #4
- Item #5
- Item #6
- Item #7
- Item #8
- Item #9
- Item #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>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'
});
});