4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<div class="intro">

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<p>Making a simple sortable list.</p>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly</div>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<div class="example">

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly {{>simple-sortable-source}}

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly</div>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<h3>Setting Up the List</h3>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<p>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`).</p>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly{{>simple-sortable-source-html}}

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<p>Now we give the list some CSS to make it visible.</p>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly{{>simple-sortable-source-css}}

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<h3>Setting Up the YUI Instance</h3>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<p>Now we need to create our YUI instance and tell it to load the `sortable` module.</p>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny DonnellyYUI().use('sortable'

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<h3>Making the List Draggable</h3>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly<p>Now that we have a YUI instance with the `sortable` module, we need to instantiate the `Sortable` instance on the list.</p>

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly{{>simple-sortable-source-js}}

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly```

4e2bc03d0ba795d507670920a0b039982f520e0bJenny Donnelly