Cum să creați elemente de drag and drop cu Vanilla JavaScript și HTML

Introducere

Drag-and-drop este o interacțiune obișnuită a utilizatorului pe care o puteți găsi în multe interfețe grafice de utilizator.

Există biblioteci JavaScript preexistente pentru a adăuga o caracteristică drag-and-drop în aplicația dvs. Cu toate acestea, pot exista situații în care o bibliotecă nu este disponibilă sau introduce o cheltuieli generale sau dependență de care proiectul dvs. nu are nevoie. În aceste situații, cunoașterea API-urilor disponibile în browserele web moderne poate oferi soluții alternative.

API-ul HTML Drag and Drop se bazează pe modelul de evenimente al DOM pentru a obține informații despre ceea ce este glisat sau aruncat și pentru a actualiza acel element la tragere sau plasare. Cu gestionarele de evenimente JavaScript, puteți transforma orice element într-un element care poate fi glisat sau într-un element care poate fi introdus.

În acest tutorial, vom construi un exemplu de glisare și plasare folosind HTML Drag and Drop API cu JavaScript vanilat pentru a utiliza gestionarele de evenimente.

Cerințe preliminare

Pentru a finaliza acest tutorial, veți avea nevoie de:

• Un browser web modern care acceptă API-ul Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Pasul 1 – Crearea proiectului și marcarea inițială

Proiectul nostru va consta dintr-un container cu două tipuri de elemente secundare:

• Elemente secundare pe care le puteți trage
• Elemente secundare care pot avea elemente scăzute în ele

Mai întâi, deschideți fereastra terminalului și creați un director de proiect nou:

Apoi, navigați la acel director:

Apoi, creați un fișier index.html în acel director:

Apoi, adăugați cod boilerplate pentru o pagină web HTML:

Și între adăugă elementul draggable și dropzone (drop target):

Salvați și închideți fișierul. Apoi, creați un fișier style.css:

Apoi, adăugați stiluri pentru elementele din index.html:

Aceasta va adăuga o anumită formatare aplicației. Acum puteți vizualiza index.html în browser și observați că aceasta produce un draggable <div> și a dropzone <div>.

Apoi, vom face în mod explicit primul <div> glisabil adăugând atributul draggable:

Salvați și închideți fișierul.

În cele din urmă, vizualizați din nou index.html în browser. Dacă facem clic pe draggable <div> și îl tragem pe ecran, ar trebui să existe o indicație vizuală a mișcării acestuia.

Valoarea implicită pentru atributul draggable este auto. Aceasta înseamnă că elementul care poate fi glisat va fi determinat de comportamentul implicit al browserului dvs. De obicei, aceasta înseamnă că selecțiile de text, imaginile și linkurile pot fi glisate fără a specifica draggable="true".

Acum aveți un fișier HTML cu un element glisabil. Vom trece la adăugarea de onevent handlers.

Pasul 2 – Gestionarea evenimentelor Drag-and-Drop cu JavaScript

În prezent, dacă eliberați mouse-ul în timp ce trageți elementul glisabil, nu se întâmplă nimic. Pentru a declanșa o acțiune de glisare sau plasare pe elementele DOM, va trebui să utilizăm API-ul Drag and Drop:

• ondragstart: Acest gestionar de evenimente va fi atașat la elementul nostru draggable și se va declanșa atunci când apare un eveniment dragstart.
• ondragover: Acest gestionar de evenimente va fi atașat la elementul nostru dropzone și se va declanșa atunci când are loc un eveniment dragover. >
• ondrop: Acest gestionar de evenimente va fi atașat și elementului nostru dropzone și se va declanșa când un drop apare evenimentul.

Notă: în total sunt opt gestionare de evenimente: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart și ondrop. Pentru exemplul nostru, nu le vom solicita pe toate.

În primul rând, să facem referire la un nou fișier https://www.digitalocean.com/community/tutorials/script.js în index.html:

Apoi, creați un nou https://www.digitalocean.com/community/tutorials/script.js file:

Obiectul DataTransfer va ține evidența informațiilor legate de tragerea curentă care se întâmplă. Pentru a ne actualiza elementul la tragere și la fixare, trebuie să accesăm direct obiectul DataTransfer.Pentru a face acest lucru, putem selecta proprietatea dataTransfer din DragEvent a elementului DOM.

Notă: DataTransfer obiectul poate urmări tehnic informații pentru mai multe elemente care sunt trase în același timp. Pentru exemplul nostru, ne vom concentra pe tragerea unui element.

Metoda dataTransfer a obiectului setData poate fi folosit pentru a seta informațiile despre starea de glisare pentru elementul dvs. glisat în prezent. Este nevoie de doi parametri:

• un șir care declară formatul celui de-al doilea parametru
• datele reale transferate

Obiectivul nostru este de a muta draggable elementul nostru într-un element părinte nou. Trebuie să putem selecta elementul nostru draggable cu un id unic. Putem seta id al elementului glisat cu metoda setData, astfel încât să poată fi folosit ulterior.

revizitați fișierul nostru https://www.digitalocean.com/community/tutorials/script.js și creați o funcție nouă pentru a utiliza setData:

Notă: Internet Explorer 9 până la 11 are probleme cu utilizarea "text/plain". Formatul trebuie să "text" pentru browserul respectiv.

Pentru a actualiza stilul CSS al elementului glisat, putem accesa stilurile sale folosind evenimentul DOM din nou și de către setarea oricăror stiluri pe care le dorim pentru currentTarget.

Să adăugăm la funcția noastră și să schimbăm backgroundColor în yellow:

Notă: Orice stiluri pe care le modificați vor trebui să fie actualizate manual din nou pe picătură dacă doriți stiluri numai cu glisare. Dacă schimbați ceva atunci când începe să trageți, elementul glisat va păstra stilul nou, cu excepția cazului în care îl schimbați înapoi.

Acum, avem funcția JavaScript pentru când începe tragerea.

Putem adăuga ondragstart la elementul draggable din index.html:

Vizualizați index.html în browserul dvs. Dacă încercați să trageți elementul acum, stilul declarat în funcția noastră va fi aplicat:

Cu toate acestea, nu se va întâmpla nimic când eliberați clicul.

Următorul handler de eveniment declanșat în această secvență este ondragover.

Comportamentul implicit de scădere pentru anumite elemente DOM cum ar fi <div> s în browsere de obicei nu acceptă eliminarea. Acest comportament va intercepta comportamentul pe care încercăm să îl implementăm. Pentru a ne asigura că obținem comportamentul de scădere dorit, vom aplica preventDefault.

Să revedem fișierul https://www.digitalocean.com/community/tutorials/script.js și creați o funcție nouă pentru a utiliza preventDefault. Adăugați acest cod la sfârșitul fișierului:

Acum, putem adăuga ondragover la elementul nostru dropzone din index.html:

În acest moment, încă nu am scris cod care să gestioneze eliminarea efectivă. Manipulatorul de evenimente final lansat în această secvență este ondrop.

Să revedem fișierul https://www.digitalocean.com/community/tutorials/script.js și să creăm o nouă funcție .

Putem face referință la datele salvate anterior cu metoda dataTransfer a obiectului setData. Vom folosi metoda dataTransfer a obiectului getData. Datele pe care le-am setat au fost id, deci asta ne va fi returnat:

Selectați elementul nostru draggable cu id pe care am preluat-o:

Selectați dropzone element:

Adăugați draggable element la dropzone:

Resetați obiectul nostru dataTransfer:

Acum, putem adăuga ondrop la elementul nostru dropzone din index.html:

Odată ce ați terminat, avem o caracteristică completă de glisare și plasare. Vizualizați index.html în browser și trageți elementul draggable la dropzone.

Exemplul nostru gestionează scenariul unui singur element glisabil și al unei singure ținte de fixare. Puteți avea mai multe elemente care pot fi glisate, mai multe ținte de fixare și personalizați-le cu toate celelalte gestionare de evenimente API de glisare și fixare.

Pasul 3 – Construirea unui exemplu avansat cu mai multe elemente glisabile

Iată încă un exemplu despre modul în care ai putea folosi acest API: o listă de sarcini cu sarcini glisabile din care poți trece o coloană "To-do" într-o coloană "Done".

Pentru a crea propria listă de sarcini, adăugați mai multe elemente glisabile cu id s la index.html:

Vizualizați index.html în în browser și trageți elementele din coloana Sarcini în coloana Terminat. Ați creat o aplicație de rezolvat și ați testat funcționalitatea.

Concluzie

În acest articol, ați creat o aplicație de rezolvat pentru a explora funcționalitatea drag-and-drop care este disponibil pentru browserele web moderne.

API-ul Drag and Drop oferă mai multe opțiuni pentru personalizarea acțiunilor dvs. dincolo de glisare și fixare. De exemplu, puteți actualiza stilul CSS al articolelor glisate. De asemenea, în loc să mutați elementul, puteți alege să copiați elementul glisabil, astfel încât să fie reprodus imediat.

Rețineți că, deși multe browsere web acceptă această tehnologie, este posibil să nu vă puteți baza pe ea dacă publicul dvs. este format din dispozitive care nu acceptă această funcționalitate.

Pentru a afla mai multe despre tot ce puteți renunța la API-ul Drag and Drop, consultați documentele MDN pe acesta.