Drag and drop in Tauri + Yew

1.5k Views Asked by At

I am having issues with handling drag and drop. I prevent_default on my drop target for both the dragEnter and dragOver events, which I can verify are firing, but the drop event is never triggered. I have also tried setting the dataTransfer.dropEffect property, which has no effect.

use yew::prelude::*;
use web_sys::{DragEvent, console::log_1};

#[function_component(App)]
pub fn app() -> Html {
    let ondragenter = Callback::from(|e: DragEvent| {
        e.prevent_default();
        e.data_transfer().unwrap().set_drop_effect("move"); // optional
        log_1(&"enter".into());
    });

    let ondragover = Callback::from(|e: DragEvent| {
        e.prevent_default();
        log_1(&"over".into());
    });

    let ondrop = Callback::from(|e: DragEvent| {
        log_1(&"drop".into());
    });

    html! {
        <main style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"
            {ondragenter}
            {ondragover}
            {ondrop}>
        </main>
    }
}

with web_sys's DragEvent and DataTransfer features enabled.

I am running this using Tauri and have tried with Yew v. 0.19 and 0.20.

0

There are 0 best solutions below