The Sortable Utility allows you to create a sortable list from a container and a group of children. It also allows you to join lists together in various ways.
The most common use case of a sortable list is an Unordered List.
Below is the sample markup used to create a `container` and a list.
```To turn this into a sortable list, you just need to create the `Sortable` object and tell it the `container` and the `nodes`.
The `nodes` can be any selector string that matches a child of the `container`. For performance reasons you will want to make the `container` an element that is as close to the `nodes` as possible. The farther away in the DOM the `container` is from the `nodes` the worse the performance will be.
``` YUI().use('sortable', function(Y) { var sortable = new Y.Sortable({ container: '#demo', nodes: 'li', opacity: '.1' }); }); ```Note: `Sortable` does not auto find your drop target items, if you change the `nodes` under the hood (add or remove) you need to call `sortable.sync()` to manage them.
Sortable uses `DD.Delegate` under the hood to handle the Drag and Drop operations. It sets itself as the `bubbleTarget` of the `Delegate` instance, so all `DD`-related events are bubbled to it.
For more information on `DD` related events, see the events section on the Drag and Drop page.
By default, a `Sortable` list can only interact with itself; you can't drag from one `Sortable` list to another. But a `Sortable` instance can be configured to be joined with another `Sortable` instance.
There are four ways a `Sortable` list can be joined: `inner`, `outer`, `full` and `none` (`none` is the default).
| Join Type | Description |
|---|---|
| `inner` | Items in the joined list can be moved into the main list but items in the main list can not be moved to the joined list. |
| `outer` | Items in the main list can be moved into the joined list but items in the joined list can not be moved to the main list. |
| `full` | All items in both lists can be moved into and out of any other joined list. |
| `none` | The default join type. No interaction with other lists. |
You can also join multiple lists in multiple ways to get the experience you are looking for.
``` YUI().use('sortable', function(Y) { var sortable1 = new Y.Sortable({ container: '#demo1', nodes: 'li', opacity: '.1' }); var sortable2 = new Y.Sortable({ container: '#demo2', nodes: 'li', opacity: '.1' }); var sortable3 = new Y.Sortable({ container: '#demo3', nodes: 'li', opacity: '.1' }); sortable1.join(sortable2, 'inner'); sortable2.join(sortable3, 'outer'); sortable3.join(sortable1, 'full'); sortable3.join(sortable2, 'full'); }); ```The `DD.Delegate` object bound to a `Sortable` instance is exposed to allow you to easily attach plugins to a `Sortable` instance.
The `Sortable` instance has a `delegate` namespace, which is a reference to the internal `DD.Delegate` instance.
``` var sortable = new Y.Sortable({ container: '#demo', nodes: 'li' }); sortable.delegate.dd.plug(SomeDDPlugin); ```