Making a simple sortable list with floated nodes.
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 (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'
});
});