<div class="intro">
<p>Making a simple sortable list with floated nodes.</p>
</div>

<div class="example">
    <style>
    {{> sortable-float-source-css}}
    {{> sortable-float-color-step-css}}
    </style>

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

    <script>
    {{> sortable-float-source-js}}
    </script>
</div>

<h3>Setting Up the List</h3>
<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>

```
{{>sortable-float-source-html}}
```

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

```
{{>sortable-float-source-css}}
```

<h3>Setting Up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the `sortable` module.</p>

```
YUI().use('sortable', function (Y) {
    // Code here.
});
```

<h3>Making the List Draggable</h3>
<p>Now that we have a YUI instance with the `sortable` module, we need to instantiate the `Sortable` instance on the list.</p>

```
{{>sortable-float-source-js}}
```
