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>
Sortable handle
To determine a different element to be used as a handle to sort the items, just add the {handleClass:'uk-panel'}
option to the data attribute.
Example
Note how only the panels serve as handles here, whereas in the example above you would already drag elements by clicking into the gap between them.
- 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="{handleClass:'uk-panel'}">
<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.
Example
Item 1
Item 2
Item 3
Item 4
Markup
<div class="uk-sortable" data-uk-sortable>
<div>...</div>
<div>...</div>
</div>
Warp mode
In Warp mode the new list order is applied after dropping the dragged element to its new position.
Example
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
Markup
<div class="uk-sortable" data-uk-sortable="{warp:true}">...</div>
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 |
---|---|---|---|
animation |
integer | 150 | Animation speed in ms |
threshold |
integer | 10 | Mouse movement threshold in pixel until trigger element dragging |
handleClass |
string | '' | CSS selector to define elements which can trigger sorting |
dragCustomClass |
string | '' | Custom class added to the dragged element |
warp |
boolean | false | Warp mode - alternative sort mode |
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 | On sortable change item |