# Sortable Drag and drop an element to a new location within 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 `data-z-sortable` attribute to a container and create child elements. ```html
``` ```html ``` ## 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 `handle: SELECTOR` option to the attribute and add the handle class to the element that you want to use as a handle. ```html ``` ```html ``` ## Group To be able to sort items from one list to another, you can group them by adding the `group: GROUP-NAME` option to the `data-z-sortable` attribute on each list. ```html
``` ```html

Group 1

Item 1
Item 2
Item 3
Item 4

Group 2

Item 1
Item 2
Item 3
Item 4

Empty Group

``` ## Custom class You can also apply one or more custom classes to items when they are being dragged. To do so, add the `cls-custom: MY-CLASS` option to the attribute. ```html ``` ```html ``` ## Component options Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. [Learn more](/docs/latest/kit/javascript#component-configuration) | Option | Value | Default | Description | | ----------------- | --------------- | ------------------------- | --------------------------------------------- | | `group` | String | | The group | | `animation` | String, Boolean | `slide` | Animation mode (`slide`, `false`). | | `duration` | Number | `250` | Animation duration in milliseconds. | | `threshold` | Number | `5` | Mouse move threshold before dragging starts. | | `cls-item` | String | `z-sortable-item` | The item class. | | `cls-placeholder` | String | `z-sortable-placeholder` | The placeholder class. | | `cls-drag` | String | `z-sortable-drag` | The ghost class. | | `cls-drag-state` | String | `z-drag` | The body's dragging class. | | `cls-base` | String | `z-sortable` | The list's class. | | `cls-no-drag` | String | `z-sortable-nodrag` | Disable dragging on elements with this class. | | `cls-empty` | String | `z-sortable-empty` | The empty list class. | | `cls-custom` | String | | The ghost's custom class. | | `handle` | String | `false` | The handle selector. | ## JavaScript Learn more about [JavaScript components](/docs/latest/kit/javascript#programmatic-use). ### Initialization ```javascript zUIkit.sortable(element, options); ``` ### Events The following events will be triggered on elements with this component attached: | Name | Description | | --------- | ---------------------------------------- | | `start` | Fires after dragging starts. | | `stop` | Fires after dragging stops. | | `moved` | Fires after an element has been moved. | | `added` | Fires after an element has been added. | | `removed` | Fires after an element has been removed. |