18f4388f9909487b198704745e4b61f884df1e81Dav Glass<div class="intro">

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<p>Making a simple sortable list with floated nodes.</p>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass</div>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<div class="example">

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff <style>

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff {{> sortable-float-source-css}}

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff {{> sortable-float-color-step-css}}

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff </style>

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff {{> sortable-float-source-color-step-html}}

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff <script>

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff {{> sortable-float-source-js}}

eb54ca05b888ebeec4712f45d334af09679c8a80Jeff Conniff </script>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass</div>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<h3>Setting Up the List</h3>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<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 (`em`).</p>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```

18f4388f9909487b198704745e4b61f884df1e81Dav Glass{{>sortable-float-source-html}}

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<p>Now we give the list some CSS to make it visible.</p>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```

18f4388f9909487b198704745e4b61f884df1e81Dav Glass{{>sortable-float-source-css}}

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<h3>Setting Up the YUI Instance</h3>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<p>Now we need to create our YUI instance and tell it to load the `sortable` module.</p>

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```

18f4388f9909487b198704745e4b61f884df1e81Dav GlassYUI().use('sortable'

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass<h3>Making the List Draggable</h3>

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

18f4388f9909487b198704745e4b61f884df1e81Dav Glass

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```

18f4388f9909487b198704745e4b61f884df1e81Dav Glass{{>sortable-float-source-js}}

18f4388f9909487b198704745e4b61f884df1e81Dav Glass```