Sortable is a minimalist JavaScript library for reorderable drag-and-drop elements.

Sortable list

Reorder the list by dragging a list item to a new position.
Add class sort-handle to the item if you want the cursor to display as move.

  • 1 - Drag me to another position.
  • 2 - Drag me to another position.
  • 3 - Drag me to another position.
  • 4 - Drag me to another position.
Sortable Tags

Reorder the tags by dragging them to a new position.

  • Html
  • Css
  • Javacsript
  • Angular
  • Meteor
List item with handle

Drag the list item to a new position by using the handle (dots). When using a handle the user is still capable of selecting the text.

  • Drag me by the handle
  • You can also select text
  • Best of both worlds!
  • Use any icon you like as a handle.
Disable

Enable / disable the option to sort the list items by clicking the button.

  • Enable to sort these items.
  • It has support for touch devices.
  • Just drag some elements around.
  • Click the button to enable / disable the drag function.
  • When disabled the user can select the text.
Localstorage

After reordering the new order will be stored in the localstorage.

  • 1 The list order will be stored in localstorage.
  • 2 It has support for touch devices.
  • 3 Just drag some elements around and refresh the page.
Groups

Reorder the groups by dragging on the group title e.g. Group A.
You can reorder the items inside a group, and move items from one group to another.

To drag elements from one list into another, both lists must have the same group: value.

Group A
  • 1 - group A item
  • 2 - group A item
  • 3 - group A item
  • 4 - group A item
  • 5 - group A item
Group B
  • 1 - group B item
  • 2 - group B item
  • 3 - group B item
  • 4 - group B item
  • 5 - group B item
Group C
  • 1 - group C item
  • 2 - group C item
  • 3 - group C item
  • 4 - group C item
  • 5 - group C item
Group D
  • 1 - group D item
  • 2 - group D item
  • 3 - group D item
  • 4 - group D item
  • 5 - group D item
Group options

You can also define whether lists can give items away pull, give and keep a copy clone of the item, and receive items put.

Pull & put
  • 1 - group A item
  • 2 - group A item
  • 3 - group A item
  • 4 - group A item
Only pull (clone)
  • 1 - group B item
  • 2 - group B item
  • 3 - group B item
  • 4 - group B item
Only put
  • 1 - group C item
  • 2 - group C item
  • 3 - group C item
  • 4 - group C item

© 2016 YourApp