Dark Logo

StarCode

CTRL D
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

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