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

* wip: implement datatransfer

* Editable kanban contents

* desktop sorta works without crashing

* lint

Author: jkelleyrtp

Cargo.toml

@@ -790,6 +790,11 @@ name = "websocket"
 path = "examples/07-fullstack/websocket.rs"
 doc-scrape-examples = true
 
+[[example]]
+name = "drag_and_drop"
+path = "examples/08-apis/drag_and_drop.rs"
+doc-scrape-examples = true
+
 [[example]]
 name = "control_focus"
 path = "examples/08-apis/control_focus.rs"

examples/08-apis/drag_and_drop.rs

@@ -0,0 +1,122 @@
+//! This example shows how to implement a simple drag-and-drop kanban board using Dioxus.
+//! You can drag items between different categories and edit their contents.
+//!
+//! This example uses the `.data_transfer()` API to handle drag-and-drop events. When an item is dragged,
+//! its ID is stored in the data transfer object. When the item is dropped into a new category, its ID is retrieved
+//! from the data transfer object and used to update the item's category.
+//!
+//! Note that in a real-world application, you'll want more sophisticated drop handling, such as visual
+//! feedback during dragging, and better drop-zone detection to allow dropping *between* items.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+struct Item {
+    id: usize,
+    name: String,
+    category: String,
+    contents: String,
+}
+
+fn app() -> Element {
+    let mut items = use_signal(initial_kanban_data);
+
+    rsx! {
+        div {
+            display: "flex",
+            gap: "20px",
+            flex_direction: "row",
+            for category in ["A", "B", "C"] {
+                div {
+                    class: "category",
+                    display: "flex",
+                    flex_direction: "column",
+                    gap: "10px",
+                    padding: "10px",
+                    flex_grow: "1",
+                    border: "2px solid black",
+                    min_height: "300px",
+                    background_color: "#f0f0f0",
+                    ondragover: |e| e.prevent_default(),
+                    ondrop: move |e| {
+                        if let Some(item_id) = e.data_transfer().get_data("text/plain").and_then(|data| data.parse::<usize>().ok()) {
+                            if let Some(pos) = items.iter().position(|item| item.id == item_id) {
+                                items.write()[pos].category = category.to_string();
+                            }
+                        }
+                    },
+                    h2 { "Category: {category}" }
+                    for (index, item) in items.iter().enumerate().filter(|item| item.1.category == category) {
+                        div {
+                            key: "{item.id}",
+                            width: "200px",
+                            height: "50px",
+                            border: "1px solid black",
+                            padding: "10px",
+                            class: "item",
+                            draggable: "true",
+                            background: "white",
+                            cursor: "grab",
+                            ondragstart: move |e| {
+                                let id = items.read()[index].id.to_string();
+                                e.data_transfer().set_data("text/plain", &id).unwrap();
+                            },
+                            pre { webkit_user_select: "none", "{item.name}" }
+                            input {
+                                r#type: "text",
+                                value: "{item.contents}",
+                                oninput: move |e| {
+                                    items.write()[index].contents = e.value();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+fn initial_kanban_data() -> Vec<Item> {
+    vec![
+        Item {
+            id: 1,
+            name: "Item 1".into(),
+            category: "A".into(),
+            contents: "This is item 1".into(),
+        },
+        Item {
+            id: 2,
+            name: "Item 2".into(),
+            category: "A".into(),
+            contents: "This is item 2".into(),
+        },
+        Item {
+            id: 3,
+            name: "Item 3".into(),
+            category: "A".into(),
+            contents: "This is item 3".into(),
+        },
+        Item {
+            id: 4,
+            name: "Item 4".into(),
+            category: "B".into(),
+            contents: "This is item 4".into(),
+        },
+        Item {
+            id: 5,
+            name: "Item 5".into(),
+            category: "B".into(),
+            contents: "This is item 5".into(),
+        },
+        Item {
+            id: 6,
+            name: "Item 6".into(),
+            category: "C".into(),
+            contents: "This is item 6".into(),
+        },
+    ]
+}

packages/desktop/src/file_upload.rs

@@ -11,8 +11,9 @@ use dioxus_html::{
     point_interaction::{
         InteractionElementOffset, InteractionLocation, ModifiersInteraction, PointerInteraction,
     },
-    FileData, FormValue, HasDragData, HasFileData, HasFormData, HasMouseData, NativeFileData,
-    SerializedFormData, SerializedFormObject, SerializedMouseData, SerializedPointInteraction,
+    FileData, FormValue, HasDataTransferData, HasDragData, HasFileData, HasFormData, HasMouseData,
+    NativeFileData, SerializedDataTransfer, SerializedFormData, SerializedFormObject,
+    SerializedMouseData, SerializedPointInteraction,
 };
 
 use serde::{Deserialize, Serialize};
@@ -234,6 +235,7 @@ impl NativeFileHover {
 #[derive(Clone)]
 pub(crate) struct DesktopFileDragEvent {
     pub mouse: SerializedPointInteraction,
+    pub data_transfer: SerializedDataTransfer,
     pub files: Vec<PathBuf>,
 }
 
@@ -247,6 +249,12 @@ impl HasFileData for DesktopFileDragEvent {
     }
 }
 
+impl HasDataTransferData for DesktopFileDragEvent {
+    fn data_transfer(&self) -> dioxus_html::DataTransfer {
+        dioxus_html::DataTransfer::new(self.data_transfer.clone())
+    }
+}
+
 impl HasDragData for DesktopFileDragEvent {
     fn as_any(&self) -> &dyn std::any::Any {
         self
@@ -389,3 +397,5 @@ impl NativeFileData for DesktopFileData {
         )
     }
 }
+
+pub struct DesktopDataTransfer {}

packages/desktop/src/webview.rs

@@ -155,16 +155,17 @@ impl WebviewEdits {
             }
             dioxus_html::EventData::Drag(ref drag) => {
                 // we want to override this with a native file engine, provided by the most recent drag event
-                let file_event = hovered_file.current().unwrap();
-                let paths = match file_event {
-                    wry::DragDropEvent::Enter { paths, .. } => paths,
-                    wry::DragDropEvent::Drop { paths, .. } => paths,
+                let file_event = hovered_file.current();
+                let file_paths = match file_event {
+                    Some(wry::DragDropEvent::Enter { paths, .. }) => paths,
+                    Some(wry::DragDropEvent::Drop { paths, .. }) => paths,
                     _ => vec![],
                 };
 
                 Rc::new(PlatformEventData::new(Box::new(DesktopFileDragEvent {
                     mouse: drag.mouse.clone(),
-                    files: paths,
+                    data_transfer: drag.data_transfer.clone(),
+                    files: file_paths,
                 })))
             }
             _ => data.into_any(),

packages/html/src/data_transfer.rs

@@ -0,0 +1,180 @@
+pub struct DataTransfer {
+    inner: Box<dyn NativeDataTransfer>,
+}
+
+impl DataTransfer {
+    pub fn new(inner: impl NativeDataTransfer + 'static) -> Self {
+        Self {
+            inner: Box::new(inner),
+        }
+    }
+
+    #[cfg(feature = "serialize")]
+    pub fn store(&self, item: impl Serialize) -> Result<(), String> {
+        let serialized = serde_json::to_string(&item).map_err(|e| e.to_string())?;
+        self.set_data("application/json", &serialized)
+    }
+
+    #[cfg(feature = "serialize")]
+    pub fn retrieve<T: for<'de> serde::Deserialize<'de>>(&self) -> Result<Option<T>, String> {
+        if let Some(data) = self.get_data("application/json") {
+            let deserialized = serde_json::from_str(&data).map_err(|e| e.to_string())?;
+            Ok(Some(deserialized))
+        } else {
+            Ok(None)
+        }
+    }
+
+    pub fn get_data(&self, format: &str) -> Option<String> {
+        self.inner.get_data(format)
+    }
+
+    pub fn get_as_text(&self) -> Option<String> {
+        self.get_data("text/plain")
+    }
+
+    pub fn set_data(&self, format: &str, data: &str) -> Result<(), String> {
+        self.inner.set_data(format, data)
+    }
+
+    pub fn clear_data(&self, format: Option<&str>) -> Result<(), String> {
+        self.inner.clear_data(format)
+    }
+
+    pub fn effect_allowed(&self) -> String {
+        self.inner.effect_allowed()
+    }
+
+    pub fn set_effect_allowed(&self, effect: &str) {
+        self.inner.set_effect_allowed(effect)
+    }
+
+    pub fn drop_effect(&self) -> String {
+        self.inner.drop_effect()
+    }
+
+    pub fn set_drop_effect(&self, effect: &str) {
+        self.inner.set_drop_effect(effect)
+    }
+
+    pub fn files(&self) -> Vec<crate::file_data::FileData> {
+        self.inner.files()
+    }
+}
+
+pub trait NativeDataTransfer: Send + Sync {
+    fn get_data(&self, format: &str) -> Option<String>;
+    fn set_data(&self, format: &str, data: &str) -> Result<(), String>;
+    fn clear_data(&self, format: Option<&str>) -> Result<(), String>;
+    fn effect_allowed(&self) -> String;
+    fn set_effect_allowed(&self, effect: &str);
+    fn drop_effect(&self) -> String;
+    fn set_drop_effect(&self, effect: &str);
+    fn files(&self) -> Vec<crate::file_data::FileData>;
+}
+
+pub trait HasDataTransferData {
+    fn data_transfer(&self) -> DataTransfer;
+}
+
+#[cfg(feature = "serialize")]
+pub use ser::*;
+#[cfg(feature = "serialize")]
+use serde::Serialize;
+
+#[cfg(feature = "serialize")]
+mod ser {
+    use crate::DragData;
+
+    use super::*;
+    use serde::{Deserialize, Serialize};
+
+    /// A serialized version of DataTransfer
+    #[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
+    pub struct SerializedDataTransfer {
+        pub items: Vec<SerializedDataTransferItem>,
+        pub files: Vec<crate::file_data::SerializedFileData>,
+        pub effect_allowed: String,
+        pub drop_effect: String,
+    }
+
+    #[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
+    pub struct SerializedDataTransferItem {
+        pub kind: String,
+        pub type_: String,
+        pub data: String,
+    }
+
+    impl NativeDataTransfer for SerializedDataTransfer {
+        fn get_data(&self, format: &str) -> Option<String> {
+            self.items
+                .iter()
+                .find(|item| item.type_ == format)
+                .map(|item| item.data.clone())
+        }
+
+        fn set_data(&self, _format: &str, _data: &str) -> Result<(), String> {
+            // todo!()
+            // Err("Cannot set data on serialized DataTransfer".into())
+            Ok(())
+        }
+
+        fn clear_data(&self, _format: Option<&str>) -> Result<(), String> {
+            // todo!()
+            // Err("Cannot clear data on serialized DataTransfer".into())
+            Ok(())
+        }
+
+        fn effect_allowed(&self) -> String {
+            self.effect_allowed.clone()
+        }
+
+        fn set_effect_allowed(&self, _effect: &str) {
+            // No-op
+        }
+
+        fn drop_effect(&self) -> String {
+            self.drop_effect.clone()
+        }
+
+        fn set_drop_effect(&self, _effect: &str) {
+            // No-op
+        }
+
+        fn files(&self) -> Vec<crate::file_data::FileData> {
+            self.files
+                .iter()
+                .map(|f| crate::file_data::FileData::new(f.clone()))
+                .collect()
+        }
+    }
+
+    impl From<&DragData> for SerializedDataTransfer {
+        fn from(_drag: &DragData) -> Self {
+            todo!()
+            //     let items = vec![]; // drag.data_transfer().items().iter().map(|item| SerializedDataTransferItem {
+            //                         //     kind: item.kind().to_string(),
+            //                         //     type_: item.type_().to_string(),
+            //                         //     data: item.data().unwrap_or_default(),
+            //                         // }).collect();
+
+            //     let files = drag
+            //         .files()
+            //         .iter()
+            //         .map(|f| crate::file_data::SerializedFileData {
+            //             name: f.name().to_string(),
+            //             size: f.size(),
+            //             type_: f.type_().to_string(),
+            //         })
+            //         .collect();
+
+            //     Self {
+            //         items,
+            //         files,
+            //         effect_allowed: drag.effect_allowed().to_string(),
+            //         drop_effect: drag.drop_effect().to_string(),
+            //     }
+            // }
+        }
+    }
+}