#drag #leptos #panel #hook

leptos_drag_reorder

Leptos hook for draggable panels which can be rearranged

1 unstable release

0.1.0 Nov 9, 2024

#1467 in Web programming

Download history 81/week @ 2024-11-04 25/week @ 2024-11-11

106 downloads per month

MIT/Apache

21KB
412 lines

Leptos Drag Reorder

Leptos hook for draggable panels which can be rearranged.

This library uses the browsers drag APIs, so it should be very stable.

Only supports Leptos 0.7

Preview GIF

Example

Provide drag order context.

let panel_order = [
    // Column 1
    RwSignal::new(vec!["1".into(), "3".into()]),
    // Column 2
    RwSignal::new(vec!["2".into()]),
];
let column_refs = provide_drag_reorder(panel_order);

Use drag reorder in panel component.

let UseDragReorderReturn {
    node_ref,
    draggable,
    set_draggable,
    hover_position,
    on_dragstart,
    on_dragend,
    ..
} = use_drag_reorder(id.to_string());

// apply node ref, on_dragstart/end, etc.

A full example is available in the example directory.

Dependencies

~21–34MB
~520K SLoC