##### Simple list example

Sortable.js offers simple list options like `animation` for duration, `onEnd` for a callback after sorting, and `draggable` to define draggable elements, making sortable lists interactive and user-friendly.

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

##### Filter

The filter `'.sortablejs-custom-disabled'` in Sortable.js prevents specific elements from being dragged. This keeps certain items in place while allowing users to move others, improving control and user experience.

Item 1
Filtered
Item 3
Item 4
Item 5
Item 6

##### Shared lists

The option `group: 'shared'` in Sortable.js enables drag-and-drop sorting between multiple lists. By using the same group name, users can easily move items between lists, enhancing interaction and organization.

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

##### Disable & Clone sorting

in Sortable.js allows items to be cloned when dragged, letting users duplicate items in another list. The `draggable="false"` attribute keeps specific elements fixed, preventing them from being moved. These options enhance user control and interaction.

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

##### Handle

The class `sortablejs-custom-handle` in Sortable.js designates a specific icon or element as the drag handle for items. This improves usability by allowing users to easily grab and move items, enhancing the overall user experience.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

##### Nested

A nested Sortable.js example lets users drag and drop items within lists, allowing for hierarchical organization. This is ideal for task management, enabling intuitive reordering of main tasks and subtasks.

Item 1
Item 2

#### Item 3

Item 3.1
Item 3.2
Item 3.3
Item 3.4
Item 4
Item 5
Item 6

##### Filter

The group element in Sortable.js enables users to drag and drop items between sortable lists. Using the same group name allows easy movement of items, improving organization in applications like project management.

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

##### Multiple Drag

The option `multiDrag: true` in Sortable.js lets users select and drag multiple items simultaneously. The `selectedClass: "active"` option highlights selected items, enhancing user experience and feedback during interactions.

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

##### Swap

The option `swap: true` in Sortable.js enables users to swap two items during drag-and-drop. The `swapClass: "active"` highlights the items being swapped, improving user feedback and making rearranging intuitive.

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

##### Swap

The option `swap: true` in Sortable.js enables users to swap two items during drag-and-drop. The `swapClass: "active"` highlights the items being swapped, improving user feedback and making rearranging intuitive.

Document 1
Project Files
Image Assets
Source Code
Documentation
Video Clips
Analytics Report
Settings
User Profiles
Shopping List
Event Schedule
Inbox

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark