Sortable List Utility: Simple Sortable List
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>
<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; }
#demo li { list-style-type: none; padding: 3px; width: 150px; border: 1px solid black; margin: 3px; background-color: #8DD5E7; }
Setting up the YUI Instance
Now we need to create our YUI instance and tell it to load the sortable
module.
YUI().use('sortable'
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({ //The container of the list container: '#demo', //The items to make sortable nodes: 'li', //Set the opacity of the sorted item to make it //almost invisible opacity: '.1' }); });
YUI().use('sortable', function(Y) { var sortable = new Y.Sortable({ //The container of the list container: '#demo', //The items to make sortable nodes: 'li', //Set the opacity of the sorted item to make it //almost invisible opacity: '.1' }); });