API di trascinamento della selezione HTML
In HTML, qualsiasi elemento può essere trascinato e rilasciato.
Esempio
Trascina l'immagine di W3Schools nel rettangolo.
Trascinare e rilasciare
Il trascinamento della selezione è una caratteristica molto comune. È quando "afferri" un oggetto e lo trascini in una posizione diversa.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il Drag and Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Esempio di trascinamento della selezione HTML
L'esempio seguente è un semplice esempio di trascinamento della selezione:
Esempio
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Potrebbe sembrare complicato, ma esaminiamo tutte le diverse parti di un evento di trascinamento della selezione.
Rendi trascinabile un elemento
Prima di tutto: per rendere trascinabile un elemento, imposta l' draggableattributo su true:
<img draggable="true">
Cosa trascinare - ondragstart e setData()
Quindi, specifica cosa dovrebbe accadere quando l'elemento viene trascinato.
Nell'esempio sopra, l' ondragstartattributo chiama una funzione, drag(event), che specifica quali dati devono essere trascinati.
Il dataTransfer.setData()metodo imposta il tipo di dati e il valore dei dati trascinati:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In questo caso, il tipo di dati è "testo" e il valore è l'id dell'elemento trascinabile ("drag1").
Dove droppare - ondragover
L' ondragoverevento specifica dove possono essere rilasciati i dati trascinati.
Per impostazione predefinita, dati/elementi non possono essere eliminati in altri elementi. Per consentire un drop, dobbiamo impedire la gestione predefinita dell'elemento.
Questo viene fatto chiamando il event.preventDefault()metodo per l'evento ondragover:
event.preventDefault()
Fai il drop - ondrop
Quando i dati trascinati vengono rilasciati, si verifica un evento di rilascio.
Nell'esempio sopra, l'attributo ondrop chiama una funzione, drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Codice spiegato:
- Chiama preventDefault() per impedire la gestione predefinita dei dati dal browser (il valore predefinito è aperto come collegamento al rilascio)
- Ottieni i dati trascinati con il metodo dataTransfer.getData(). Questo metodo restituirà tutti i dati impostati sullo stesso tipo nel metodo setData()
- I dati trascinati sono l'id dell'elemento trascinato ("drag1")
- Aggiungi l'elemento trascinato nell'elemento di rilascio
Altri esempi
Esempio
Come trascinare (e rilasciare) un'immagine avanti e indietro tra due elementi <div>: