Dark Logo

Urbix

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