Logo Logo Logo Logo HRM F&B
Ready to Begin Your Journey?

Explore our resources to kickstart your experience!

Documentation

Apps

Pages

Authentication & Error

Ready to Begin Your Journey?

Explore our resources to kickstart your experience!

Apps

Pages

Authentication & Error

Help & Support

Notification 4
Logo Image
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 Image
Donald liked your post

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 followed you

Monday, 07:14 AM

Avatar Image
Daniel invited you to join Website Redesign

Thursday, 5:10 PM

Avatar Image
Avatar Image
Avatar Image
Paul Danielle

paul@fabkin.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

it's time to style according to your choice ..!

Layout

Choose your layout

Vertical
Horizontal
Semi Box
Content Width:
Default
Box
Layout Direction:
RTL
LTR
Layout Mode:
Light
Dark
System
Sidebar Size:
Default
Icon
Sidebar Color:
Light
Dark