List example

Simple list example.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one

Grid example

Simple grid example.

Card 1

Some quick example text.

Card 2

Some quick example text.

Card 3

Some quick example text.

Card 4

Some quick example text.

Card 5

Some quick example text.

Card 6

Some quick example text.

Shared

Simple list example that can be shared.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one
  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one

Cloning

Simple list example that can be cloned.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one
  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one

Disabling Sorting

Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one
  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one

Handle

Simple example using custom handle.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one
Drag me
Card 1
Drag me
Card 2
Drag me
Card 3
Drag me
Card 4
Drag me
Card 5
Drag me
Card 6

Filter

Try dragging the item with a dark background. It cannot be done, because that item is filtered out using the filter option.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one

Nested

Simple nested sortables example.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
    • Purus sodales ultricies
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
    • Vestibulum laoreet porttitor sem
    • Lorem ipsum dolor sit amet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

MultiDrag

Allows multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one

Swap

Changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.

  • 1. An item
  • 2. A second item
  • 3. A third item
  • 4. A fourth item
  • 5. And a fifth one