Loading...

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.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.