<div class="intro">
<p>Making a sortable list with drag-and-drop notifications.</p>
</div>

<div class="example">
    <style>
    {{> sortable-events-source-css}}
    {{> sortable-indent-css}}
    </style>

    {{> sortable-events-source-indent-html}}

    <script>
    {{>sortable-events-source-js-pre}}
    {{>sortable-events-source-js-dd}}
    {{>sortable-events-source-js-post}}
    </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 (`li`). We also set up a log list (`#log`) which will inform us of the drag events.</p>

<p><strong>Note:</strong> This example is using <a href="../cssgrids/index.html">CSS Grids</a> to create a two-column layout.</p>

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

<p>Now we style the list and the log with some CSS to make them visible.</p>

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

<h3>Making the List Draggable</h3>
<p>Now we need to create our YUI instance and tell it to load the `sortable` module. Then we need to instantiate the `Sortable` instance on the list.</p>

```
{{>sortable-events-source-js-pre}}
{{>sortable-events-source-js-post}}
```

<h3>Adding in Events</h3>
<p>We have sorting working but we want to know when the user picks up an element and where it ends up. We'll want to hook into `drag:end` event that `DD.Delegate` fires. Depending on whether the dragged element was dropped into the middle of the list, or the beginning, or the end, we log a slightly different message.</p>

```
{{>sortable-events-source-js-dd}}
```

<h3>Putting it together</h3>

```
{{>sortable-events-source-js-pre}}
{{>sortable-events-source-js-dd}}
{{>sortable-events-source-js-post}}
```
