Sortable List Utility: Simple Sortable List - Floated Nodes
Making a simple sortable list with floated nodes.
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 (em).
<div id="demo"> <em>Item #1</em> <em>Item #2</em> <em>Item #3</em> <em>Item #4</em> <em>Item #5</em> <em>Item #6</em> <em>Item #7</em> <em>Item #8</em> <em>Item #9</em> <em>Item #10</em> </div>
Now we give the list some CSS to make it visible.
#demo { border: 1px solid black; height: 200px; } #demo em { display: block; float: left; 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'
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: 'em', //Set the opacity of the sorted item to make it //almost invisible opacity: '.1' }); });
