Intercettare il drag and drop in Javascript
Con l'avvento di HTML 5, e con il miglioramento di Javascript stesso, è stato possibile fare molte cose senza l'uso di librerie esterne.
Una di queste è il drag and drop!
In questo articolo vediamo come impostarlo e come intercettare i vari eventi.
Qui sotto avete un esempio in cui racchiudo tutto l'HTML e il Javascript insieme.
C'è anche un pò di CSS per sistemare un pò la pagina:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>TEST</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
section {
display: flex;
}
.console {
border-left: 3px solid black;
width: 30vw;
height: 100vh;
padding-left: 20px;
}
.display {
width: 70vw;
height: 100vh;
}
.dropzone {
display: inline-block;
width: 25%;
height: 200px;
margin: 25px 25px 25px 0;
padding: 10px;
background-color: black;
}
.content {
width: 100%;
height: 100%;
background: red;
}
</style>
</head>
<body>
<section>
<div class="display">
<h1>Sposta il rosso!</h1>
<div class="dropzone">
<div class="content" draggable="true"></div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
</div>
<div class="console">
<h2>Console eventi</h2>
<div id="drag_start"></div>
<div id="drag_do"></div>
<div id="drag_end"></div>
<div id="drag_over"></div>
<div id="drag_enter"></div>
<div id="drag_leave"></div>
<div id="drop_do"></div>
</div>
</section>
<script>
const dropzone = document.querySelectorAll(".dropzone");
const content = document.querySelector(".content");
let dragstart = 0;
let drag = 0;
let dragend = 0;
let dragover = 0;
let dragenter = 0;
let dragleave = 0;
let drop = 0;
content.addEventListener("dragstart", (e) => {
dragstart++;
drag_start.innerText = `Dragstart: ${dragstart}`;
});
content.addEventListener("drag", (e) => {
drag++;
drag_do.innerText = `Drag: ${drag}`;
});
content.addEventListener("dragend", (e) => {
dragend++;
drag_end.innerText = `Dragend: ${dragend}`;
});
dropzone.forEach((dropzone) => {
dropzone.addEventListener("dragenter", (e) => {
dragenter++;
drag_enter.innerText = `Dragenter: ${dragenter}`;
});
dropzone.addEventListener("dragleave", (e) => {
dragleave++;
drag_leave.innerText = `Dragleave: ${dragleave}`;
});
dropzone.addEventListener("dragover", (e) => {
e.preventDefault();
dragover++;
drag_over.innerText = `Dragover: ${dragover}`;
});
dropzone.addEventListener("drop", (e) => {
drop++;
drop_do.innerText = `Drop: ${drop}`;
dropzone.append(content);
});
});
</script>
</body>
</html>
Enjoy!
javascript html css dragstart drag dragend dragenter dragleave dragover drop
Commentami!