Fork me on GitHub

SortableJS

JavaScript library for reorderable drag-and-drop lists

Features
  • Simple list
  • Shared lists
  • Cloning
  • Disabling sorting
  • Handles
  • Filter
  • Thresholds
    • Examples
  • Grid
  • Nested sortables
    • Framework Support

    Features

    Simple list example

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

    Shared lists

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example2Left, {
    group: 'shared', // set both lists to same group
    animation: 150
});

new Sortable(example2Right, {
    group: 'shared',
    animation: 150
});

    Cloning

    Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example3Left, {
    group: {
        name: 'shared',
        pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150
});

new Sortable(example3Right, {
    group: {
        name: 'shared',
        pull: 'clone'
    },
    animation: 150
});

    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.

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    new Sortable(example4Left, {
    group: {
        name: 'shared',
        pull: 'clone',
        put: false // Do not allow items to be put into this list
    },
    animation: 150,
    sort: false // To disable sorting: set sort to false
});

new Sortable(example4Right, {
    group: 'shared',
    animation: 150
});

    Handle

      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
      Item 6
    new Sortable(example5, {
    handle: '.handle', // handle's class
    animation: 150
});

    Filter

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

    Item 1
    Item 2
    Item 3
    Filtered
    Item 4
    Item 5
    new Sortable(example6, {
    filter: '.filtered', // 'filtered' class is not draggable
    animation: 150
});

    Thresholds

    Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.

    1
    2
    Invert Swap
    new Sortable(example7, {
    swapThreshold: 1,
    animation: 150
});

    Examples

    Grid Example

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    Item 16
    Item 17
    Item 18
    Item 19
    Item 20

    Nested Sortables Example

    NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true.

    Item 1.1
    Item 2.1
    Item 2.2
    Item 3.1
    Item 3.2
    Item 3.3
    Item 3.4
    Item 2.3
    Item 2.4
    Item 1.2
    Item 1.3
    Item 1.4
    Item 2.1
    Item 2.2
    Item 2.3
    Item 2.4
    Item 1.5

    Framework Support

    Vue

    Vue.Draggable

    React

    react-sortablejs

    Angular

    angular-sortablejs

    jQuery

    jquery-sortablejs

    Knockout

    knockout-sortablejs

    Meteor

    meteor-sortablejs

    Polymer

    polymer-sortablejs