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 (`li`). We also set up a log list (`#log`) which will inform us of the drag events.

Note: This example is using CSS Grids to create a two-column layout.

Now we style the list and the log with some CSS to make them visible.

Making the List Draggable

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.

Adding in Events

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.

Putting it together