use_draggable

Make elements draggable.

Demo

Usage

use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::{use_draggable_with_options, UseDraggableOptions, UseDraggableReturn};
use leptos_use::core::Position;

#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();

// `style` is a helper string "left: {x}px; top: {y}px;"
let UseDraggableReturn {
    x,
    y,
    style,
    ..
} = use_draggable_with_options(
    el,
    UseDraggableOptions::default().initial_value(Position { x: 40.0, y: 40.0 }),
);

view! {
    <div node_ref=el style=move || format!("position: fixed; {}", style.get())>
        Drag me! I am at { x }, { y }
    </div>
}
}

Feature

This function is only available if the crate feature use_draggable is enabled

Types

• struct UseDraggableOptions
• struct UseDraggableCallbackArgs
• struct UseDraggableReturn

Source

Source • Demo • Docs