Sortable
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.
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.
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.
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.
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.
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 3
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.
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.
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.
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.