Skip to main content

DropZone

Function DropZone 

Source
pub fn DropZone<T: Clone + PartialEq + 'static>(_: DropZoneProps<T>) -> Element
Expand description

A region that accepts drags carrying T.

Handles the HTML5 boilerplate for you: preventDefault on dragover, enter/leave depth counting (so child elements don’t cause hover flicker), and acceptance filtering.

Styling hooks: while an acceptable drag is in flight anywhere, the div carries data-active="true" (reveal your drop targets); while that drag hovers this zone it also carries data-over="true" (highlight it). Both are absent otherwise, so presence-based selectors (CSS [data-over], Tailwind data-over:ring-2) work directly. Driven by the shared context, so they light up for pointer, touch and keyboard drags alike.

Opting into edge adds the closest-edge signal for insertion indicators: while an acceptable pointer drag hovers this zone, the div also carries data-edge="top" | "right" | "bottom" | "left" (the zone edge nearest the pointer, live on every move - see edge_of), and the delivered DropOutcome::edge records it at release. Style it with value selectors, e.g. Tailwind data-[edge=top]:shadow-[0_-2px_0_0_currentColor].

Overlap precedence follows registry order, not browser paint order: among overlapping acceptable zones, the later record receives the drop. CSS z-index, stacking contexts, and portals are not inspected. Keep registry and visual order aligned when targets overlap, or avoid the overlap; a rejecting later record is skipped at release. Replacing a same-id record retains its slot.

§Props

For details, see the props struct definition.

  • id : Option<ZoneId>

    Stable identity for this zone. Auto-generated if omitted.

  • label : Option<String>

    Human label for screen-reader announcements (“Over {label}”).

  • accepts : Option<Callback<T,bool>>

    Return false to reject a payload (zone won’t highlight or accept it). Keep this predicate cheap. Registry queries snapshot their candidates before invoking application callbacks, so reentrant registry work does not collide with a live signal borrow.

  • accepts_query : Option<Callback<DropQuery<T>,bool>>

    Rich acceptance predicate with source, effect, input mode, pointer kind, and drag identity.

  • allowed_effects : DropEffects

    Effects this zone supports. Defaults to all effects for 3.x compatibility; prefer DropEffects::STANDARD for new zones.

  • edge : Option<EdgeSet>

    Track the zone edge nearest the pointer: EdgeSet::Vertical for top/bottom (a vertical stack), EdgeSet::Horizontal for left/right, EdgeSet::All for all four. Renders data-edge while hovered and fills DropOutcome::edge. Off (absent, None) by default.

  • on_drop : EventHandler<DropOutcome<T>>

    Fired on a successful drop.

  • attributes : Vec<Attribute>
  • children : Element