Dark Logo

Property Finder

CTRL D
Notification 4 Unread
Item Back in Stock

Today, 02:45 PM

Good news! The item you wanted is back in stock. Grab it before it’s gone again!

Avatar Iamge
Donald

Friday, 11:29 PM

Birthday Reminder

Tuesday, 02:45 PM

Don’t forget! It’s Emily birthday tomorrow. Send them a message!

Avatar Image
Richard

Monday, 07:14 AM

Avatar Image
Avatar Image
Avatar Image
Jaydon Levin

jaydon@gmail.com

Sortable JS

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