Sortable

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

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

<div uk-sortable>
  <div></div>
  <div></div>
</div>
Copy to clipboard
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
  • <ul
      class="uk-child-width-1-4@s uk-grid-small uk-child-width-1-2"
      uk-sortable="handle: .handle"
      uk-grid
    >
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 1
        </div>
      </li>
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 2
        </div>
      </li>
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 3
        </div>
      </li>
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 4
        </div>
      </li>
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 5
        </div>
      </li>
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 6
        </div>
      </li>
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 7
        </div>
      </li>
      <li>
        <div
          class="handle uk-background-muted uk-padding-small uk-text-small uk-text-center"
        >
          Item 8
        </div>
      </li>
    </ul>

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.

<ul uk-sortable="handle: .uk-sortable-handle">
  <li>
    <div class="uk-sortable-handle"></div>
    ...
  </li>
</ul>
Copy to clipboard
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
  • <ul
      class="uk-child-width-1-4@s uk-grid-small uk-child-width-1-2"
      uk-sortable="handle: .uk-sortable-handle"
      uk-grid
    >
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 1
        </div>
      </li>
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 2
        </div>
      </li>
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 3
        </div>
      </li>
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 4
        </div>
      </li>
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 5
        </div>
      </li>
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 6
        </div>
      </li>
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 7
        </div>
      </li>
      <li>
        <div
          class="uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-text-small"
        >
          <span
            class="uk-margin-small-right uk-sortable-handle uk-text-center"
            uk-icon="ratio: 0.8; icon: table"
          ></span
          >Item 8
        </div>
      </li>
    </ul>

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

<div uk-sortable="group: my-group">
  <div></div>
</div>

<div uk-sortable="group: my-group">
  <div></div>
</div>
Copy to clipboard
  • Group 1

    Item 1
    Item 2
    Item 3
    Item 4

    Group 2

    Item 1
    Item 2
    Item 3
    Item 4

    Empty Group

  • <div class="uk-child-width-1-3@s" uk-grid>
      <div>
        <h4 class="uk-h4 uk-margin-bottom">Group 1</h4>
        <div uk-sortable="group: sortable-group">
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 1
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 2
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 3
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 4
            </div>
          </div>
        </div>
      </div>
      <div>
        <h4 class="uk-h4 uk-margin-bottom">Group 2</h4>
        <div uk-sortable="group: sortable-group">
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 1
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 2
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 3
            </div>
          </div>
          <div class="uk-margin">
            <div class="uk-background-muted uk-padding-small uk-text-small">
              Item 4
            </div>
          </div>
        </div>
      </div>
      <div>
        <h4 class="uk-h4 uk-margin-bottom">Empty Group</h4>
        <div uk-sortable="group: sortable-group"></div>
      </div>
    </div>

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.

<ul uk-sortable="cls-custom: my-class">
  ...
</ul>
Copy to clipboard
  • <ul class="uk-width-medium" uk-sortable="cls-custom: uk-background-muted">
      <li
        class="uk-background-placeholder uk-margin-small-top uk-padding-small uk-text-small"
      >
        <a href="#">Item 1</a>
      </li>
      <li
        class="uk-background-placeholder uk-margin-small-top uk-padding-small uk-text-small"
      >
        <a href="#">Item 2</a>
      </li>
      <li
        class="uk-background-placeholder uk-margin-small-top uk-padding-small uk-text-small"
      >
        <a href="#">Item 3</a>
      </li>
      <li
        class="uk-background-placeholder uk-margin-small-top uk-padding-small uk-text-small"
      >
        <a href="#">Item 4</a>
      </li>
    </ul>

Component options

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

OptionValueDefaultDescription
groupStringThe group
animationString, BooleanslideAnimation mode (slide, false).
durationNumber250Animation duration in milliseconds.
thresholdNumber5Mouse move threshold before dragging starts.
cls-itemStringuk-sortable-itemThe item class.
cls-placeholderStringuk-sortable-placeholderThe placeholder class.
cls-dragStringuk-sortable-dragThe ghost class.
cls-drag-stateStringuk-dragThe body’s dragging class.
cls-baseStringuk-sortableThe list’s class.
cls-no-dragStringuk-sortable-nodragDisable dragging on elements with this class.
cls-emptyStringuk-sortable-emptyThe empty list class.
cls-customStringThe ghost’s custom class.
handleStringfalseThe handle selector.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.sortable(element, options);

Events

The following events will be triggered on elements with this component attached:

NameDescription
startFires after dragging starts.
stopFires after dragging stops.
movedFires after an element has been moved.
addedFires after an element has been added.
removedFires after an element has been removed.

Theme development

On your tailwind.config.js file, add the Sortable component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        sortable: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-sortable.uk-sortable
hook-drag.uk-sortable-drag
hook-placeholder.uk-sortable-placeholder
hook-empty.uk-sortable-empty
hook-misc*