2021-06-04 10:25:36 +00:00
|
|
|
<!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;
|
2021-07-13 09:37:39 +00:00
|
|
|
const drag = document.getElementById('drag');
|
|
|
|
|
const drop = document.getElementById('drop');
|
|
|
|
|
drag.addEventListener('dragstart', function(event) {
|
|
|
|
|
event.dataTransfer.setData('id', event.target.id);
|
2021-06-04 10:25:36 +00:00
|
|
|
window.didDragStart = true;
|
|
|
|
|
});
|
2021-07-13 09:37:39 +00:00
|
|
|
drop.addEventListener('dragenter', function(event) {
|
|
|
|
|
event.preventDefault();
|
2021-06-04 10:25:36 +00:00
|
|
|
window.didDragEnter = true;
|
|
|
|
|
});
|
2021-07-13 09:37:39 +00:00
|
|
|
drop.addEventListener('dragover', function(event) {
|
|
|
|
|
event.preventDefault();
|
2021-06-04 10:25:36 +00:00
|
|
|
window.didDragOver = true;
|
|
|
|
|
});
|
2021-07-13 09:37:39 +00:00
|
|
|
drop.addEventListener('drop', function(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
const id = event.dataTransfer.getData('id');
|
|
|
|
|
const el = document.getElementById(id);
|
2021-06-04 10:25:36 +00:00
|
|
|
if (el) {
|
2021-07-13 09:37:39 +00:00
|
|
|
event.target.appendChild(el);
|
2021-06-04 10:25:36 +00:00
|
|
|
window.didDrop = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
