Skip to main content

Draggable

Function Draggable 

Source
pub fn Draggable<T: Clone + PartialEq + 'static>(
    _: DraggableProps<T>,
) -> Element
Expand description

Wraps its children in a focusable pointer/keyboard drag source and pushes payload into the shared context on drag start.

Any extra attributes (class, style, id…) are forwarded to the div.

While this element’s payload is in flight the div carries data-dragging="true", and data-disabled="true" when disabled - both are absent otherwise, so presence-based selectors (CSS [data-dragging], Tailwind data-dragging:opacity-50) work directly.

§Props

For details, see the props struct definition.

  • payload : T

    The value delivered to whichever DropZone receives this drag.

  • drag_id : Option<DragId>

    Stable source identity. Auto-generated once per mounted draggable.

  • zone : Option<ZoneId>

    The zone this item currently lives in (reported in DropOutcome::from).

  • effect : DropEffect

    Drop effect. Defaults to Move.

  • disabled : bool

    Disable dragging without unmounting.

  • threshold : f64

    Movement in CSS px before a pointer press becomes a drag.

  • activation : Option<ActivationPolicy>

    Composable activation policy. When omitted, threshold retains the 3.x distance behavior.

  • touch : TouchSense

    How a finger shares this element with native scrolling. TouchSense::Auto (default) keeps vertical swipes scrolling the page and picks up on a short hold or a sideways pull; TouchSense::Immediate owns every touch from the first pixel. Mouse drags are identical under both; pens follow the finger rules.

  • label : Option<String>

    Human label used in screen-reader announcements (“Picked up {label}”).

  • on_drag_start : Option<EventHandler<()>>

    Fired when a drag begins.

  • on_drag_end : Option<EventHandler<bool>>

    Fired when the drag ends; true if a zone consumed the payload, false if it was cancelled.

  • attributes : Vec<Attribute>
  • children : Element