datatransfer object, drag_and_drop example, fix drag-and-drop (#4789)

* wip: implement datatransfer

* Editable kanban contents

* desktop sorta works without crashing

* lint

packages/web/src/data_transfer.rs

@@ -0,0 +1,54 @@
+use dioxus_html::{FileData, NativeDataTransfer};
+
+/// A wrapper around the web_sys::DataTransfer to implement NativeDataTransfer
+#[derive(Clone)]
+pub struct WebDataTransfer {
+    pub(crate) data: web_sys::DataTransfer,
+}
+
+impl WebDataTransfer {
+    /// Create a new WebDataTransfer from a web_sys::DataTransfer
+    pub fn new(data: web_sys::DataTransfer) -> Self {
+        Self { data }
+    }
+}
+
+unsafe impl Send for WebDataTransfer {}
+unsafe impl Sync for WebDataTransfer {}
+
+impl NativeDataTransfer for WebDataTransfer {
+    fn get_data(&self, format: &str) -> Option<String> {
+        self.data.get_data(format).ok()
+    }
+    fn set_data(&self, format: &str, data: &str) -> Result<(), String> {
+        self.data.set_data(format, data).map_err(|e| {
+            format!(
+                "Failed to set data for format {format}: {:?}",
+                e.as_string()
+            )
+        })
+    }
+    fn clear_data(&self, format: Option<&str>) -> Result<(), String> {
+        match format {
+            Some(f) => self.data.clear_data_with_format(f),
+            None => self.data.clear_data(),
+        }
+        .map_err(|e| format!("{:?}", e))
+    }
+    fn effect_allowed(&self) -> String {
+        self.data.effect_allowed()
+    }
+    fn set_effect_allowed(&self, effect: &str) {
+        self.data.set_effect_allowed(effect);
+    }
+    fn drop_effect(&self) -> String {
+        self.data.drop_effect()
+    }
+    fn set_drop_effect(&self, effect: &str) {
+        self.data.set_drop_effect(effect);
+    }
+
+    fn files(&self) -> Vec<FileData> {
+        todo!()
+    }
+}

packages/web/src/events/drag.rs

@@ -1,11 +1,12 @@
-use crate::{WebFileData, WebFileEngine};
+use crate::{WebDataTransfer, WebFileData, WebFileEngine};
 
 use super::{Synthetic, WebEventExt};
 use dioxus_html::{
     geometry::{ClientPoint, ElementPoint, PagePoint, ScreenPoint},
     input_data::{decode_mouse_button_set, MouseButton},
-    FileData, HasDragData, HasFileData, HasMouseData, InteractionElementOffset,
-    InteractionLocation, Modifiers, ModifiersInteraction, PointerInteraction,
+    FileData, HasDataTransferData, HasDragData, HasFileData, HasMouseData,
+    InteractionElementOffset, InteractionLocation, Modifiers, ModifiersInteraction,
+    PointerInteraction,
 };
 use web_sys::{DragEvent, FileReader};
 
@@ -72,6 +73,23 @@ impl HasDragData for Synthetic<DragEvent> {
     }
 }
 
+impl HasDataTransferData for Synthetic<DragEvent> {
+    fn data_transfer(&self) -> dioxus_html::DataTransfer {
+        use wasm_bindgen::JsCast;
+
+        if let Some(target) = self.event.dyn_ref::<web_sys::DragEvent>() {
+            if let Some(data) = target.data_transfer() {
+                let web_data_transfer = WebDataTransfer::new(data);
+                return dioxus_html::DataTransfer::new(web_data_transfer);
+            }
+        }
+
+        // Return an empty DataTransfer if we couldn't get one from the event
+        let web_data_transfer = WebDataTransfer::new(web_sys::DataTransfer::new().unwrap());
+        dioxus_html::DataTransfer::new(web_data_transfer)
+    }
+}
+
 impl HasFileData for Synthetic<DragEvent> {
     fn files(&self) -> Vec<FileData> {
         use wasm_bindgen::JsCast;

packages/web/src/lib.rs

@@ -30,6 +30,9 @@ pub use history::{HashHistory, WebHistory};
 mod files;
 pub use files::*;
 
+mod data_transfer;
+pub use data_transfer::*;
+
 #[cfg(all(feature = "devtools", debug_assertions))]
 mod devtools;