Ogni evento che partecipa al processo di click, trascinamento e deposito può essere intercettato e gestito con un listener, gli eventi intercettabili sono:
- dragstart
- drag
- dragenter
- dragleave
- dragover
- drop
- dragend
Iniziamo con un esempio semplice: intercettiamo il dragstart, l’inizio del trascinamento:
<!doctype html>
<html>
<head>
<title>Drag&Drop - il dragstart</title>
<style>
#divdrag {
width: 300px;
height: 100px;
background-color: #333;
color: #fff;
cursor: move;
padding: 10px;
}
p {
margin-top: 40px;
text-align: center;
}
</style>
<script>
function dragStart(e) {
// # event (e).target è il nostro div "sorgente"
var target = e.target;
// # Inserisco nell'oggetto DataTransfer un testo
e.dataTransfer.setData("Text", "Te lo avevo detto");
// # consento il move
e.dataTransfer.effectAllowed = "move";
// # cambio il colore del div
target.style.backgroundColor = "#cc0000";
// # e ne modifico il testo prendendolo dall'oggetto DataTransfer
target.innerHTML = "<p>" + e.dataTransfer.getData("Text") + "</p>";
}
</script>
<body>
<div id="divdrag" ondragstart="dragStart(event)" draggable="true">
<p>Se mi trascini divento rosso!</p>
</div>
</body>
</html>L’esempio utilizza DataTransfer per incapsulare una stringa che poi utilizza per cambiare il testo dell’elemento trascinato.
Il div prima del trascinamento:
e durante:
Affrontiamo ora un caso leggermente più complesso, un drag finalizzato ad un drop. Utilizzeremo l’evento ondrop sull’area di deposito (un div) e cancelleremo gli eventi dragenter e dragover in modo da far capire allo user-agent che il div con id = "divdrop" è la nostra area di deposito.
Il meccanismo di "cancellazione" avviene aggiungendo agli handlers dragOver e dragEntered un event.preventDefault() (return false per IE).
<!doctype html>
<html>
<head>
<title>Drag & Drop, dragEnded, dragEnter, dragEnded, drop</title>
<style>
#divdrag {
width: 200px;
height: 100px;
background-color: #333;
color: #fff;
cursor: move;
padding: 10px;
}
#divdrop {
width: 300px;
height: 150px;
background-color: #ccc;
color: #333;
padding: 10px;
margin-top: 10px;
}
p {
margin-top: 40px;
text-align: center;
}
</style>
<script>
// # Definisco il type
var format = "Text";
// # Gestione del dragstart
function dragStart(e) {
// # event (e).target è il nostro div "sorgente"
var target = e.target;
e.dataTransfer.setData(format, "Riccardo");
// # consento solo il move
e.dataTransfer.effectAllowed = "move";
target.style.backgroundColor = '#cc0000';
}
// # Gestione del dragenter (cancel)
function dragEnter(e)
if(event.preventDefault) {
event.preventDefault();
}
return false;
}
// # Gestione del dragover (cancel)
function dragOver(e) {
if(event.preventDefault) {
event.preventDefault();
}
return false;
}
// # Gestione del dragend
function dragEnd(e) {
e.target.parentNode.removeChild(e.target);
}
//# Gestione del drop
function drop(e) {
// # event (e).target qui è il nostro "drop" div
var target = e.target;
// # Recupero la stringa "Riccardo"
var data = e.dataTransfer.getData(format);
target.innerHTML = "<p>Benvenuto...</p>";
// # Creo un elemento p
var p = document.createElement("p");
// # Gli assegno "Riccardo" come testo
p.textContent = data;
// # Appendo p al div
target.appendChild(p);
}
</script>
<body>
<div id="divdrag" ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true">
<p>Arrivo!</p>
</div>
<div id="divdrop" ondragenter="dragEnter(event)" ondragover="dragOver(event)" ondrop="drop(event)">
<p>Ti aspetto!</p>
</div>
</body>
</html>Notate l’handler per l’evento dragend; al termine del’operazione l’elemento trascinato viene eliminato.
Nelle immagini che seguono, l’intero processo di Drag&Drop su Chrome:
Tempo 0:
Drag:
Drop:
