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, ghost 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