Logo Logo Logo Logo
Draggable Cards
Draggable Cards Example

Create draggable cards using Sortable.js by applying it to a container with card elements. This allows users to drag and rearrange cards within the container, making the layout interactive and customizable.

1. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

2. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

3. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

4. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

5. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

6. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

Draggable over Multiple Containers Example

Enable dragging of items across multiple containers using Sortable.js. Apply Sortable to each container and configure the group option to allow items to be moved between them.

Container A
A1. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

A2. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

Container B
B1. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

B2. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

B3. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

Container C
C1. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

C2. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

C3. Drag me!

This is a draggable card. It can be dragged and dropped between columns. Try moving it around!

Suggestions: Add more interactive elements or dynamic content here for a better user experience.

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