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
odrop
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 (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 gestiredragstart
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 metodogetData()
deldataTransfer
oggetto. - Secondo, aggiungi lelemento trascinabile come elemento secondario dellelemento destinazione di rilascio.
- Terzo, rimuovi
hide
classe dallelementodraggable
.
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
edragend
gli eventi si attivano sullelemento trascinabile. -
dragenter
,dragover
, odrop
gli eventi si attivano sul bersaglio di rilascio. - Chiama
event.preventDefault()
suldragenter
edragover
gestori di eventi per rendere un elemento un obiettivo di rilascio valido. - Utilizza
event.dataTransfer
oggetto con i metodisetData()
egetData()
per trasferire i dati nelloperazione di trascinamento.
- Questo tutorial è stato utile?
- SìNo