##### 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