# Sortable

Create sortable grids and lists to rearrange the order of its elements.

Drag and drop an element to a new location within the the sortable grid, while the other items adjust to fit. This is great, if you want to sort items like gallery or menu items, for example.

## Usage

To apply this component, add the `.uk-sortable` class to a container and create child elements to define the component. To enable the necessary JavaScript, just add the `data-uk-sortable` attribute.

### Example

In this example we used a grid from the Grid component to arrange the sortable items.

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10

### Markup

    <ul class="uk-sortable" data-uk-sortable>
        <li>...</li>
        <li>...</li>
    </ul>

### Sort any element

The sortable component is not limited to `<ul>` elements. You can use any block element as a container.

#### Markup

    <div class="uk-sortable" data-uk-sortable>
        <div>...</div>
        <div>...</div>
    </div>

## Sortable handle

By default, the entire sortable element can be used for drag and drop sorting. To create a handle which will be used instead, just add the `{handleClass:'uk-sortable-handle'}` option to the data attribute and add the handle class to the element that you want to use as a handle.

### Example

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10

NOTE In this example we used the `.uk-icon-bars` class from the Icon component to style the handle.

### Markup

    <ul class="uk-sortable" data-uk-sortable="{handleClass:'uk-sortable-handle'}">
        <li><div class="uk-sortable-handle"></div>...</li>
    </ul>

## Multiple lists

To be able to sort items from one list to another, you can group them by adding the `data-uk-sortable="{group:'GROUP-NAME'}"` attribute to each list.

### Example

### First list

Item 1
Item 2
Item 3
Item 4

### Second list

Item 1
Item 2
Item 3
Item 4

### Markup

    <ul class="uk-sortable" data-uk-sortable="{group:'my-group'}">...</ul>
    <ul class="uk-sortable" data-uk-sortable="{group:'my-group'}">...</ul>

## JavaScript options

This is an example of how to set options through the data attribute:

    data-uk-sortable="{animation:0, dragCustomClass:'dragging'}"

Option | Possible value | Default | Description
--- | --- | --- | ---
`group` | string | false | List group
`animation` | integer | 150 | Animation speed in ms
`threshold` | integer | 10 | Mouse movement threshold in pixel until trigger element dragging
`handleClass` | string | '' | Custom class to define elements which can trigger sorting
`dragCustomClass` | string | '' | Custom class added to the dragged element

### Init element manually

    var sortable = UIkit.sortable(element, { /* options */ });

### Events

Name | Parameter | Description
--- | --- | ---
`start.uk.sortable` | event, sortable object, dragged element | On sortable drag start
`move.uk.sortable` | event, sortable object | On sortable move item
`stop.uk.sortable` | event, sortable object, dragged element | On sortable stop dragging
`change.uk.sortable` | event, sortable object, dragged element, action | On sortable change item