Description: Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
Keywords: sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, dnd, sortableJS

# SortableJS

### JavaScript library for reorderable drag-and-drop lists

## 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
Swap Threshold
Invert Swap
Direction

    new Sortable(example7, {
        swapThreshold: 1,
        invertSwap: true,
        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.
It is also always recommended that either the `invertSwap` option is set to true, or the `swapThreshold` option is lower than the default value of 1 (eg `0.65`).

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

    // Loop through each nested sortable element
    for (var i = 0; i < nestedSortables.length; i++) {
    	new Sortable(nestedSortables[i], {
    		group: 'nested',
    		animation: 150,
    		fallbackOnBody: true,
    		swapThreshold: 0.65
    	});
    }

## Plugins

#### MultiDrag

The MultiDrag plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

    new Sortable(multiDragDemo, {
    	multiDrag: true,
    	selectedClass: 'selected',
    	fallbackTolerance: 3, // So that we can select items on mobile
    	animation: 150
    });

#### Swap

The Swap plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

    new Sortable(swapDemo, {
    	swap: true, // Enable swap plugin
    	swapClass: 'highlight', // The class applied to the hovered swap item
    	animation: 150
    });

## Comparisons

## jQuery-UI

## Dragula

## Framework Support

### Vue

### Vue.Draggable

### React

### react-sortablejs

### Angular

### ngx-sortablejs

### jQuery

### jquery-sortablejs

### Knockout

### knockout-sortablejs

### Meteor

### meteor-sortablejs

### Polymer

### polymer-sortablejs

### Ember

### ember-sortablejs