github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-04 14:13:00 +08:00
Code Projects Activity

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

Browse Source 
* [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>
This commit is contained in:
Omar Ferro 2024-10-29 10:15:36 +01:00 committed by GitHub
parent 308304b75e
commit f9d80323dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 159 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mkdocs-website/docs/en/changelog.md
View File

@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added ### 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) - 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). - 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 ### Changed
- Taskfile refactor by [leaanthony](https://github.com/leaanthony) in [#3748](https://github.com/wailsapp/wails/pull/3748) - Taskfile refactor by [leaanthony](https://github.com/leaanthony) in [#3748](https://github.com/wailsapp/wails/pull/3748)

43
v3/examples/html-dnd-api/README.md Normal file
View File

@ -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 | |

75
v3/examples/html-dnd-api/assets/index.html Normal file
View File

@ -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>

40
v3/examples/html-dnd-api/main.go Normal file
View File

@ -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())
}
}