Sortable

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

Table of contents

• Usage
• Handle
• Group
• Custom class
• Component options
• JavaScript
  • Initialization
  • Events

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-uk-sortable attribute to a container and create child elements.

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.

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-uk-sortable attribute on each list.

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.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

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	uk-sortable-item	The item class.
cls-placeholder	String	uk-sortable-placeholder	The placeholder class.
cls-drag	String	uk-sortable-drag	The ghost class.
cls-drag-state	String	uk-drag	The body’s dragging class.
cls-base	String	uk-sortable	The list’s class.
cls-no-drag	String	uk-sortable-nodrag	Disable dragging on elements with this class.
cls-empty	String	uk-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.

Initialization

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.