Trascinamento 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 un diverso posto.

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 HTML di trascinamento e rilascio

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 direttamente

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

Impostare l'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 posizionati i dati trascinati.

Per default, i dati/elementi non possono essere posizionati in altri elementi. Per implementare il trascinamento, dobbiamo impedire la gestione predefinita dell'elemento.

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

event.preventDefault();

Effettuare la posizione di deposito - 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)
  • Ottenere i dati trascinati tramite il metodo getData() di dataTransfer. Questo metodo restituirà qualsiasi tipo di dati impostato con setData()
  • I dati trascinati sono l'id dell'elemento trascinato ("drag1")
  • Aggiungi l'elemento trascinato all'elemento di destinazione

Più esempi

Trascinamento dell'immagine

Come trascinare un'immagine tra due elementi <div>:

Trascina l'immagine di CodeW3C.com nel rettangolo.

Prova direttamente