use_draggable
Make elements draggable.
Demo
Usage
use leptos::prelude::*;
use leptos::html::Div;
use leptos_use_draggable::{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>
}
}Installation
cargo add leptos-use-draggable
Options
UseDraggableOptions
Options for use_draggable_with_options.
Every option is set with a builder method of the same name, e.g. UseDraggableOptions::default().exact(...). See also the API docs.
exact
Type: Signal<bool>
Only start the dragging when click on the element directly. Defaults to false.
prevent_default
Type: Signal<bool>
Prevent events defaults. Defaults to false.
stop_propagation
Type: Signal<bool>
Prevent events propagation. Defaults to false.
dragging_element
Type: DragEl
Element to attach pointermove and pointerup events to. Defaults to window.
handle
Type: Option<HandleEl>
Handle that triggers the drag event. Defaults to target.
pointer_types
Type: Vec<PointerType>
Pointer types that listen to. Defaults to [Mouse, Touch, Pen].
initial_value
Type: MaybeRwSignal<Position>
Initial position of the element. Defaults to { x: 0, y: 0 }.
target_offset
Type: Arc<dyn Fn(web_sys::EventTarget) -> (f64, f64)>
Computes the initial offset of the target element for drag positioning. Defaults to using its bounding client rectangle’s left and top values.
on_start
Type: Arc<dyn Fn(UseDraggableCallbackArgs) -> bool + Send + Sync>
Callback when the dragging starts. Return false to prevent dragging.
on_move
Type: Arc<dyn Fn(UseDraggableCallbackArgs) + Send + Sync>
Callback during dragging.
on_end
Type: Arc<dyn Fn(UseDraggableCallbackArgs) + Send + Sync>
Callback when dragging end.