blob: bc376a50451e01d0ca7fa59f7e8df73ab6f5995d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html>
<head>
<title>Drag-and-drop test</title>
<style>
#drop {
width: 5em;
height: 5em;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="drag" draggable="true">drag me</div>
<div id="drop"></div>
<script>
window.didDragStart = false;
window.didDragEnter = false;
window.didDragOver = false;
window.didDrop = false;
const drag = document.getElementById('drag');
const drop = document.getElementById('drop');
drag.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', event.target.id);
window.didDragStart = true;
});
drop.addEventListener('dragenter', function(event) {
event.preventDefault();
window.didDragEnter = true;
});
drop.addEventListener('dragover', function(event) {
event.preventDefault();
window.didDragOver = true;
});
drop.addEventListener('drop', function(event) {
event.preventDefault();
const id = event.dataTransfer.getData('id');
const el = document.getElementById(id);
if (el) {
event.target.appendChild(el);
window.didDrop = true;
}
});
</script>
</body>
</html>
|
