Sortable.js

https://sortablejs.github.io/Sortable/
Admin
Sortable.js is a JavaScript library that enables drag-and-drop functionality for reordering lists,...
Tokens:1,118
Snippets:20
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Initialize a simple sortable list

Source: https://sortablejs.github.io/Sortable

Basic setup for a sortable list with animation and a custom ghost class.

```javascript
new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});
```

--------------------------------

### Initialize shared sortable lists

Source: https://sortablejs.github.io/Sortable

Configure multiple lists to share the same group, allowing items to be moved between them.

```javascript
new Sortable(example2Left, {
    group: 'shared', // set both lists to same group
    animation: 150
});

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

--------------------------------

### Initialize nested sortable lists

Source: https://sortablejs.github.io/Sortable

Iterate through nested elements to apply Sortable configuration, recommended with fallbackOnBody enabled.

```javascript
// 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
	});
}
```

--------------------------------

### Configure swap thresholds

Source: https://sortablejs.github.io/Sortable

Adjust swap behavior using swapThreshold and invertSwap for more precise control over item placement.

```javascript
new Sortable(example7, {
    swapThreshold: 1,
    invertSwap: true,
    animation: 150
});
```

--------------------------------

### Enable Swap plugin

Source: https://sortablejs.github.io/Sortable

Changes behavior to swap items instead of reordering them.

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

--------------------------------

### Enable cloning between lists

Source: https://sortablejs.github.io/Sortable

Set the pull option to 'clone' to keep the original item in place when dragging to another list.

```javascript
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
});
```

--------------------------------

### Enable MultiDrag plugin

Source: https://sortablejs.github.io/Sortable

Allows selecting and dragging multiple items simultaneously.

```javascript
new Sortable(multiDragDemo, {
	multiDrag: true, // Enable multi-drag
	selectedClass: 'selected', // The class applied to the selected items
	fallbackTolerance: 3, // So that we can select items on mobile
	animation: 150
});
```

--------------------------------

### Restrict dragging to a handle

Source: https://sortablejs.github.io/Sortable

Use the handle option to specify a CSS selector for the element that triggers the drag action.

```javascript
new Sortable(example5, {
    handle: '.handle', // handle's class
    animation: 150
});
```

--------------------------------

### Filter non-draggable items

Source: https://sortablejs.github.io/Sortable

Use the filter option to prevent specific elements from being dragged.

```javascript
new Sortable(example6, {
    filter: '.filtered', // 'filtered' class is not draggable
    animation: 150
});
```

--------------------------------

### Disable sorting in a list

Source: https://sortablejs.github.io/Sortable

Set the sort option to false to prevent reordering within a list while still allowing items to be dragged out.

```javascript
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
});
```
Tokens:
Raw