Trascinamento di JavaScript

Riepilogo: in questo tutorial imparerai a conoscere lAPI di trascinamento di JavaScript.

Introduzione in JavaScript Drag and Drop API

HTML5 ha introdotto formalmente la specifica drag-and-drop. La maggior parte dei browser Web moderni ha implementato il trascinamento della selezione nativo in base alle specifiche HTML5.

Per impostazione predefinita, solo limmagine e il testo possono essere trascinati. Per trascinare unimmagine, tieni semplicemente premuto il pulsante del mouse e poi spostala. Per trascinare il testo, è necessario evidenziare del testo e trascinarlo nello stesso modo in cui si trascina unimmagine.

HTML5 specifica che quasi tutti gli elementi possono essere trascinati. Per rendere un elemento trascinabile, aggiungi la proprietà draggable con il valore true al suo tag HTML. Ad esempio:

Code language: HTML, XML (xml)

Eventi su elementi trascinabili

Quando trascini un elemento, questi eventi si attivano nella seguente sequenza:

• dragstart
• drag
• dragend

Quando tieni premuto un pulsante del mouse e inizi a muovere il mouse, levento dragstart si attiva sullelemento trascinabile che stai trascinando. Il cursore si trasforma in un simbolo di non caduta (un cerchio attraversato da una linea) per indicare che non è possibile rilasciare lelemento su se stesso.

Dopo il dragstart levento si attiva, levento drag si attiva ripetutamente finché trascini lelemento.

E levento dragend si attiva quando interrompi il trascinamento dellelemento.

Lobiettivo di tutti gli eventi (e.target) è lelemento che viene trascinato.

Per impostazione predefinita , il browser non modifica laspetto dellelemento trascinato. Pertanto, puoi personalizzarne laspetto in base alle tue preferenze.

Eventi su destinazioni di rilascio

Quando trascini un elemento su una destinazione di rilascio valida, questi eventi si attivano nella sequenza seguente:

• dragenter
• dragover
• dragleave o drop

Levento dragenter si attiva non appena mentre trascini lelemento su una destinazione di rilascio.

Dopo lattivazione dellevento dragenter, levento dragover si attiva ripetutamente fintanto che trascini lelemento allinterno del confine della destinazione di rilascio.

Quando trascini lelemento al di fuori del confine della destinazione di rilascio, dragover levento interrompe lattivazione e viene attivato levento dragleave.

Nel caso in cui rilasci lelemento sul target, drop viene generato levento al posto dellevento dragleave.

Il target ( ) di dragenter, dragover, dragleave e drop gli eventi sono gli elementi obiettivo di rilascio.

Obiettivo di rilascio valido

Quasi tutti gli elementi supportano gli eventi obiettivo di rilascio (dragenter, dragover, dragleave e drop). Tuttavia, non consentono il rilascio per impostazione predefinita.

Se rilasci un elemento su un obiettivo di rilascio che non consente di rilasciare, ha vinto levento drop non si attiva.

Per trasformare un elemento in un obiettivo di rilascio valido, puoi sostituire il comportamento predefinito di dragenter e dragover chiamando il metodo event.preventDefault() nei gestori di eventi corrispondenti. (Vedi la sezione di esempio per ulteriori informazioni)

Trasferisci i dati utilizzando loggetto dataTransfer

Per trasferire i dati con unazione di trascinamento, utilizza dataTransfer oggetto.

Loggetto dataTransfer è una proprietà dellevento. Ti consente di trasferire i dati dallelemento trascinato alla destinazione di rilascio.

Loggetto dataTransfer ha due metodi: setData() e getData().

setData() ti consente di impostare i dati delloperazione di trascinamento nel formato e nei dati specificati :

Code language: CSS (css)

Il formato può essere text/plain o text/uri-list. E i dati possono essere una stringa che rappresenta i dati da aggiungere alloggetto di trascinamento.

Il metodo getData() recupera i dati di trascinamento memorizzati da setData().

getData() accetta un argomento:

Il formato può essere text/plain o text/uri-list. Il getData() restituisce una stringa memorizzata dal metodo setData() o una stringa vuota se loperazione di trascinamento non include dati.

Esempio di trascinamento della selezione di JavaScript

Svilupperemo la seguente semplice applicazione di trascinamento della selezione per dimostrare lAPI di trascinamento della selezione di JavaScript:

Crea il struttura del progetto

Per prima cosa, crea una nuova cartella chiamata drag-n-drop-basics. Allinterno di questa cartella, crea due sottocartelle chiamate css e js.

Secondo, crea un nuovo file chiamato app.js nella js cartella, style.css in css cartella e index.html nella drag-n-drop-basics cartella.

Terzo, inserisci il link al style.css e il tag script che collega al app.js nel file index.html in questo modo:

Crea il file index.html

Inserisci il seguente codice nel file index.html:

In questo file index.html, abbiamo utilizzato lelemento .container per allineare lintestazione e lelemento drop-targets.

Allinterno dellelemento drop-target, abbiamo ha posizionato tre div elementi con la stessa classe box. E inseriamo un altro elemento div con la classe item nella prima casella.

Se apri index.html e prova a trascinare la casella gialla, vedrai il cursore che indica che non puoi trascinare:

Per rendere lelemento trascinabile, aggiungi la proprietà draggable con il valore di true al suo tag HTML come segue:

Code language: JavaScript (javascript)

Ora, se salvi index.html, aprilo nel browser di nuovo, vedrai che puoi trascinare lelemento elemento in questo modo:

Gestisci eventi sullelemento trascinabile

Il file style.css ha .hide classe che nasconde un elemento:

Code language: CSS (css)

Nel file app.js, aggiungi il seguente codice:

Come i Funziona:

• Innanzitutto, seleziona lelemento trascinabile utilizzando querySelector().
• Secondo, allega un dragstart gestore di eventi per lelemento trascinabile.
• Terzo, definire la funzione dragStart() per gestire dragstart evento.

Se apri il file index.html e inizi a trascinare lelemento trascinabile, vedrai il messaggio drag starts... in la console.

Nel dragStart gestore di eventi, è necessario memorizzare id dellelemento trascinabile. E devi nasconderlo:

Se trascini lelemento, vedrai che scompare una volta che inizi a trascinare.

Per risolvere questo problema, usa setTimeout() funzione:

Ora puoi trascinare lelemento trascinabile fuori dalla sua posizione originale:

Gestisci eventi su destinazioni di rilascio

Il file style.css ha anche una classe CSS chiamata .drag-over che trasforma lo stile del bordo del target di rilascio in tratteggiato e rosso:

Code language: CSS (css)

In app.js, è necessario per selezionare gli elementi dellobiettivo di rilascio e gestire dragenter, dragover, dragleave e drop eventi di questi elementi:

lo stile del bordo del target di rilascio dovrebbe cambiare quando dragenter e dragover si verifica levento. Dovrebbe ripristinare lo stile quando si verifica levento dragleave e drop.

Per farlo, aggiungi e rimuovi la classe drag-over al drop target in questo modo:

Ora, se trascini lelemento trascinabile in unaltra posizione target, vedrai che il bordo del target di rilascio cambia come mostrato nellimmagine seguente:

Per rendere valido il target di rilascio, devi chiamare event.preventDefault() nel dragenter e dragover gestori di eventi in questo modo:

Se non lo fai, levento drop non verrà mai sparare perché lelemento div non è una destinazione di rilascio valida per impostazione predefinita.

Se trascini lelemento trascinabile su una destinazione di rilascio, vedrai che il cursore modifiche che indicano che puoi eliminare lelemento:

Ora, se rilasci lelemento item, vedrai che scompare immediatamente.

Per risolvere questo problema problema, è necessario aggiungere lhandle dellevento drop.

• Innanzitutto, ottieni il id dellelemento trascinabile utilizzando il metodo getData() del dataTransfer oggetto.
• Secondo, aggiungi lelemento trascinabile come elemento secondario dellelemento destinazione di rilascio.
• Terzo, rimuovi hide classe dallelemento draggable.

Il codice seguente mostra il drop gestore di eventi:

Se trascini lelemento trascinabile ora, dovrebbe funzionare come previsto.

Quanto segue mostra il file app.js completo:

Ed ecco il link alla demo.

Riepilogo

• Aggiungi la proprietà draggable con il valore true a un elemento per renderlo trascinabile.
• dragstart, drag e dragend gli eventi si attivano sullelemento trascinabile.
• dragenter, dragover, o drop gli eventi si attivano sul bersaglio di rilascio.
• Chiama event.preventDefault() sul dragenter e dragover gestori di eventi per rendere un elemento un obiettivo di rilascio valido.
• Utilizza event.dataTransfer oggetto con i metodi setData() e getData() per trasferire i dati nelloperazione di trascinamento.