Sycamore DnD

sycomore 的拖放库

添加了 create_draggable 和 create_droppable 函数，这些函数抽象了拖放操作中的难点。这个库相对较低级，不假设任何关于放置行为的操作。这使得可以执行读取文件等操作，但需要自定义代码来处理可排序列表或其他常见的拖放场景。

兼容性

由于它提供的功能，这个库目前需要 GitHub 版本的 Sycamore。一旦 Attributes 更新发布到 crates.io，将不再需要。

示例用法

#[component]
fn App<'cx, G: Html>(cx: Scope<'cx>) -> View<G> {
    let inside = create_signal(cx, false);

    let drop_inside = create_droppable(cx)
        .on_drop(move |_: ()| inside.set(true))
        .hovering_class("drag-over")
        .build();
    let drop_outside = create_droppable(cx)
        .on_drop(move |_: ()| inside.set(false))
        .hovering_class("drag-over")
        .build();
    let drag = create_draggable(cx)
        .dragging_class("dragging")
        .build();

    view! { cx,
        div(class = "container") {
            div(style = "min-height:100px;width:100%;", ref = drop_outside) {
                (if !*inside.get() {
                    view! { cx,
                        div(class = "item", ref = drag) {
                            "Drag me"
                        }
                    }
                } else {
                    View::empty()
                })
            }
            div(class="box", ref = drop_inside) {
                (if *inside.get() {
                    view! { cx,
                        div(class = "item", ref = drag) {
                            "Drag me"
                        }
                    }
                } else {
                    View::empty()
                })
            }
        }
    }
}