TEMPLATE FEATURES

 

 

Sortable Items

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 6
  • Item 3
  • Item 4
  • Item 5
  • Item 8
  • Item 2
  • Item 7
  • 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 '' Custom class 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

About Us

Curabitur sollicitudin neque ante, commodo efficitur libero semper et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam at suscipit mi. Maecenas et elit sem. Suspendisse a laoreet sem. Integer facilisis, magna at volutpat volutpat

Latest Posts

Tags

Business Hours

Our support Hotline is available 24 Hours a day: (+61) 023 456 7805

Monday-Friday: 9am to 5pm
Saturday: 10am to 2pm
Sunday: Closed from 10am
Public Holidays: Closed all day

client1.jpgclient2.jpgclient3.jpgclient4.jpgclient5.jpgclient6.jpgclient7.jpgclient8.jpgclient9.jpg