dioxus-dnd 3.1.0

Modular, accessible drag-and-drop for Dioxus: sortable lists, kanban boards, trees, grids, file drops, multi-select, touch support and more
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

//! Explicit drag activators and interactive-child escape hatches.

use dioxus::prelude::*;

#[derive(Clone, Copy)]
pub(crate) struct ActivatorContext {
    pub pointer: Signal<Option<i32>>,
    pub keyboard: Signal<bool>,
}

/// An accessible button that activates the nearest handle-only
/// [`super::Draggable`].
#[component]
pub fn DragHandle(
    #[props(default = "Drag".to_string())] label: String,
    #[props(default)] disabled: bool,
    #[props(extends = button, extends = GlobalAttributes)] mut attributes: Vec<Attribute>,
    children: Element,
) -> Element {
    let activator = try_use_context::<ActivatorContext>();
    super::protect_attributes(
        &mut attributes,
        &[
            "type",
            "disabled",
            "aria-label",
            "data-dnd-handle",
            "onpointerdown",
            "onkeydown",
        ],
    );
    let style = super::merge_style_invariant_last(
        &mut attributes,
        "touch-action: none; user-select: none;",
        &["touch-action", "user-select"],
    );
    rsx! {
        button {
            r#type: "button",
            disabled,
            aria_label: label,
            "data-dnd-handle": "true",
            style,
            onpointerdown: move |event: PointerEvent| {
                if !super::primary_press(&event) {
                    return;
                }
                if let Some(context) = activator.filter(|_| !disabled) {
                    let mut pointer = context.pointer;
                    pointer.set(Some(event.pointer_id()));
                }
            },
            onkeydown: move |_| {
                if let Some(context) = activator.filter(|_| !disabled) {
                    let mut keyboard = context.keyboard;
                    keyboard.set(true);
                }
            },
            ..attributes,
            {children}
        }
    }
}

/// Stop pointer and keyboard events in an interactive subtree from
/// activating a surface-driven draggable.
#[component]
pub fn NoDrag(
    #[props(extends = span, extends = GlobalAttributes)] attributes: Vec<Attribute>,
    children: Element,
) -> Element {
    let mut attributes = attributes;
    super::protect_attributes(
        &mut attributes,
        &["data-no-drag", "onpointerdown", "onkeydown"],
    );
    rsx! {
        span {
            "data-no-drag": "true",
            onpointerdown: move |event: PointerEvent| event.stop_propagation(),
            onkeydown: move |event: KeyboardEvent| event.stop_propagation(),
            ..attributes,
            {children}
        }
    }
}