mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-04 13:22:55 +08:00
f9d80323dd
* [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>
76 lines
1.7 KiB
HTML
76 lines
1.7 KiB
HTML
<!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>
|