dioxus-dnd-kit 🦀

A flexible, performant, and layout-stable Drag-and-Drop library for Dioxus 0.7.

Developed to handle smooth reordering, even when using JIT-engines like Tailwind CSS. It avoids layout flickering by keeping the DOM structure stable during drag operations.

Features

Layout Stability: No more jumping elements when an item is picked up.
Tailwind Friendly: Handles dynamic style injections gracefully.
High Performance: Uses join_all for batch rect measurements.
Customizable: Full control over handlers, overlays, and placeholders.

Installation

Add to your Cargo.toml:

[dependencies]
dioxus-dnd-kit = "0.1.0"

Quick Start

use dioxus::prelude::*;
use dioxus_dnd_kit::prelude::*;

fn App() -> Element {
    let mut items = use_signal(|| vec!["Item 1".to_string(), "Item 2".to_string(), "Item 3".to_string()]);

    rsx! {
        DraggableView {
            class: "p-4 space-y-2",
            // Unique key for each item
            key_gen: move |item: String| item.clone(),
            // How to render each item in the list/overlay
            render: move |item: String| rsx! {
                div { "{item}" }
            },
            // The droppable container
            Droppable {
                class: "bg-gray-100 p-4 rounded-lg",
                items,
                // Items inside are rendered as Draggable automatically
            }
        }
    }
}

Components

DraggableView

The root manager. Handles global mouse events and renders the DraggableOverlay.

Draggable

Wraps your items. It manages a placeholder to keep the list size consistent while an item is "floating".

DraggableHandler

A specific area to grab the item. Perfect if you only want a small icon to trigger the drag.

Droppable

The "brain" of the operation. It detects collisions and updates your items signal in real-time.

Advanced: Tailwind & Dynamic Rects

If you use the Tailwind Play CDN or dynamic styles that change element sizes, dioxus-dnd-kit is ready for it. It uses a MutationObserver internally (or you can trigger recalculate_rects) to ensure coordinates are always fresh.

Examples

Check the examples folder for more.

License

MIT or Apache-2.0

dioxus-dnd-kit 0.1.0