Trascinamento e rilascio HTML5

Trascina l'immagine di CodeW3C.com nel rettangolo.

Trascinamento e rilascio

Trascinamento e rilascio (Drag e Drop) è una caratteristica comune. Si riferisce a prendere qualcosa e trascinarlo in una posizione diversa.

Il trascinamento e rilascio fa parte dello standard HTML5: qualsiasi elemento è trascinabile.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente il trascinamento e rilascio.

API
Trascinamento e rilascio 4.0 9.0 3.5 6.0 12.0

Esempio di trascinamento e rilascio HTML

Di seguito è riportato un semplice esempio di trascinamento e rilascio:

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>

Prova personalmente

Può sembrare un po' complesso, ma esaminiamo tutte le diverse parti degli eventi di trascinamento e rilascio.

Impostare un elemento come trascinabile

Prima di tutto: per rendere un elemento trascinabile, impostare l'attributo draggable su true:

<img draggable="true">

Contenuto di trascinamento e rilascio - ondragstart e setData()

Poi, si specifica cosa accade quando l'elemento viene trascinato.

Nell'esempio sopra, l'attributo ondragstart chiama una funzione drag(event), che specifica quali dati devono essere trascinati.

Il metodo setData() di dataTransfer imposta il tipo di dati e il valore dei dati trascinabili:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

In questo esempio, il tipo di dati è "text", e il valore è l'id dell'elemento trascinabile ("drag1").

Dove trascinare - ondragover

L'evento ondragover determina dove possono essere depositati i dati trascinati.

Per impostazione predefinita, i dati/elementi non possono essere depositati in altri elementi. Per implementare la funzionalità di trascinamento e rilascio, dobbiamo impedire la gestione predefinita degli elementi.

Questa operazione è completata dal metodo event.preventDefault() dell'evento ondragover:

event.preventDefault()

Effettuare la deposizione - ondrop

Si verifica l'evento drop quando si rilascia il dato trascinato.

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));
}

Spiegazione del codice:

  • Chiamare preventDefault() per impedire il modo predefinito di gestione dei dati del browser (l'azione predefinita dell'evento drop è aprire come link)
  • Ottieni i dati trascinati tramite il metodo getData() di dataTransfer. Questo metodo restituirà qualsiasi tipo di dati impostato nello stesso tipo nel metodo setData()
  • I dati trascinati sono l'id dell'elemento trascinato ("drag1")
  • Aggiungi l'elemento trascinato all'elemento di destinazione

Più esempi

Spostare avanti e indietro le immagini

Come spostare un'immagine avanti e indietro tra due elementi <div>:

Trascina l'immagine di CodeW3C.com nel rettangolo.

Prova personalmente