Crate taino_dnd_leptos 

Leptos hooks and components for accessible, pointer-events drag-and-drop.

This crate is the framework-binding layer; see taino_dnd_core for the framework-free primitives that power it.

Quick start

use leptos::prelude::*;
use taino_dnd_core::{DraggableId, DroppableId};
use taino_dnd_leptos::{provide_dnd_context, use_draggable, use_droppable};

#[component]
fn App() -> impl IntoView {
    provide_dnd_context();
    let d = use_draggable(DraggableId(1));
    let z = use_droppable(DroppableId(2));
    view! {
        <div
            node_ref=d.node_ref
            on:pointerdown=move |e| d.on_pointer_down(&e)
            on:pointermove=move |e| d.on_pointer_move(&e)
            on:pointerup=move |e| d.on_pointer_up(&e)
            on:pointercancel=move |e| d.on_pointer_cancel(&e)
            style=move || d.style()
        >
            "Drag me"
        </div>
        <div node_ref=z.node_ref class:over=move || z.is_over.get()>
            "Drop zone"
        </div>
    }
}

See docs/ROADMAP.md for the staged plan; Stage 1 ships the API in this quick-start, Stage 2 adds keyboard sensors, animations, auto-scroll, and ARIA announcements.

Structs

AutoScrollConfig

Tuning knobs for auto-scroll.

DndContext

Shared drag-and-drop state installed at the root of a region that uses taino-dnd-leptos.

DropResult

The outcome of a completed drag interaction.

FlipConfig

Configuration for use_flip_with. The default is 220 ms with a standard ease-out curve.

ModifierContext

Read-only inputs available to Modifier::apply beyond the displacement itself.

UseDraggable

Handle returned by use_draggable. Wire its fields onto a <div> in your view.

UseDroppable

Handle returned by use_droppable. Wire its node_ref to your element and read is_over for hover styling.

Vector

A 2D displacement vector in CSS pixels.

Enums

AnnounceEvent

A drag-lifecycle event worth announcing to assistive technology.

Axis

Cardinal axis used by Modifier::RestrictToAxis.

Modifier

Built-in modifiers.

Functions

DndAnnouncer

A visually-hidden ARIA live region that announces drag-and-drop activity.

DragOverlay

A fixed-position layer that follows the active drag.

default_announcement

The library’s built-in announcement strings — raw numeric ids.

provide_dnd_context

Install a DndContext for descendants. Call once near the root of your drag-and-drop region (typically inside the top-level component for a page or a board).

use_dnd_context

Retrieve the nearest ancestor DndContext.

use_drag_container

Register a container element. Returns a NodeRef<Div> for the user to attach to whichever element should bound the drags.

use_draggable

Register an element as a draggable identified by id.

use_draggable_with

Like use_draggable, but with a reactive disabled flag.

use_droppable

Register an element as a drop target identified by id.

use_droppable_with

Like use_droppable, but with a reactive disabled flag.

use_flip

Install FLIP animation tracking on the element behind node_ref.

use_flip_with

Like use_flip but with a custom FlipConfig.