[v3 alpha test] HTML Drag and Drop API test (#3856)

* [v3 example] HTML dnd API test * Update v3/examples/html-dnd-api/main.go Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * docs: add entry to changelog --------- Co-authored-by: Lea Anthony <lea.anthony@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2025-05-03 21:12:11 +08:00 · 2024-10-29 10:15:36 +01:00 · 2024-10-29 10:15:36 +01:00 · f9d80323dd
commit f9d80323dd
parent 308304b75e
4 changed files with 159 additions and 0 deletions
--- a/mkdocs-website/docs/en/changelog.md
+++ b/mkdocs-website/docs/en/changelog.md
@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Templates for sveltekit and sveltekit-ts that are set for non-SSR development by [atterpac](https://github.com/atterpac) in [#3829](https://github.com/wailsapp/wails/pull/3829)
 - Update build assets using new `wails3 update build-assets` command by [leaanthony](https://github.com/leaanthony).
+- Example to test the HTML Drag and Drop API by [FerroO2000](https://github.com/FerroO2000) in [#3856](https://github.com/wailsapp/wails/pull/3856)

 ### Changed
 - Taskfile refactor by [leaanthony](https://github.com/leaanthony) in [#3748](https://github.com/wailsapp/wails/pull/3748)
--- a/v3/examples/html-dnd-api/README.md
+++ b/v3/examples/html-dnd-api/README.md
@ -0,0 +1,43 @@
+# HTML Drag and Drop API Example
+
+This example should demonstrate whether the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API") works correctly.
+
+## Expected Behaviour
+
+When dragging the "draggable", in the console should be printed:
+1. "dragstart" once
+2. "drag" many times
+3. "dragend" once
+
+When dragging the "draggable" on the drop target, the inner text of the latter shoud change and in the console should be printed:
+1. "dragstart" once
+2. "drag" many times
+3. "dragenter" once
+4. "dragover" many times (alternating with "drag")
+5.  - "drop" once (in case of a drop inside the drop target)
+    - "dragleave" once (in case the draggable div leaves the drop target)
+6. "dragend" once
+
+## Running the example
+
+To run the example, simply run the following command:
+
+```bash
+go run main.go
+```
+
+## Building the example
+
+To build the example in debug mode, simply run the following command:
+
+```bash
+wails3 task build
+```
+
+# Status
+
+| Platform | Status      |
+|----------|-------------|
+| Mac      | Working     |
+| Windows  | Not Working |
+| Linux    |             |
--- a/v3/examples/html-dnd-api/assets/index.html
+++ b/v3/examples/html-dnd-api/assets/index.html
@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        body{
+            background-color: white;
+        }
+
+        #draggable {
+            width: 100px;
+            height: 100px;
+            background-color: yellow;
+            text-align: center;
+        }
+
+        #dropTarget {
+            width: 200px;
+            height: 200px;
+            border: 2px solid red;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+<h1>HTML Drag and Drop API Demo</h1>
+<br/>
+
+<div id="draggable" draggable="true" >draggable</div>
+
+<div id="dropTarget" >drop target</div>
+
+</body>
+
+<script type="module">
+    const draggable = document.getElementById('draggable');
+
+    draggable.addEventListener('dragstart', (event) => {
+        console.log('dragstart');
+        dropTarget.innerText = 'drop target';
+    });
+
+    draggable.addEventListener("drag", (event) => {
+        console.log('drag');
+    });
+
+    draggable.addEventListener("dragend", (event) => {
+        console.log('dragend');
+    });
+
+    const dropTarget = document.getElementById('dropTarget');
+
+    dropTarget.addEventListener('dragenter', (event) => {
+        console.log('dragenter');
+    });
+
+    dropTarget.addEventListener('dragleave', (event) => {
+        console.log('dragleave');
+        dropTarget.innerText = 'left drop target';
+    });
+
+    dropTarget.addEventListener('dragover', (event) => {
+        event.preventDefault()
+        console.log('dragover');
+        dropTarget.innerText = 'dragged over';
+    });
+
+    dropTarget.addEventListener('drop', (event) => {
+        console.log('drop');
+        dropTarget.innerText = 'dropped';
+    });
+</script>
+
+</html>
--- a/v3/examples/html-dnd-api/main.go
+++ b/v3/examples/html-dnd-api/main.go
@ -0,0 +1,40 @@
+package main
+
+import (
+	"embed"
+	"log"
+
+	"github.com/wailsapp/wails/v3/pkg/application"
+)
+
+//go:embed assets
+var assets embed.FS
+
+func main() {
+
+	app := application.New(application.Options{
+		Name:        "HTML Drag and Drop API Demo",
+		Description: "A demo of the HTML Drag and drop API",
+		Assets: application.AssetOptions{
+			Handler: application.BundledAssetFileServer(assets),
+		},
+		Mac: application.MacOptions{
+			ApplicationShouldTerminateAfterLastWindowClosed: true,
+		},
+	})
+
+	app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
+		Title: "Drag-n-drop Demo",
+		Mac: application.MacWindow{
+			Backdrop:                application.MacBackdropTranslucent,
+			TitleBar:                application.MacTitleBarHiddenInsetUnified,
+			InvisibleTitleBarHeight: 50,
+		},
+	})
+
+	err := app.Run()
+
+	if err != nil {
+		log.Fatal(err.Error())
+	}
+}