TL; DR – HTML5 Drag and Drop API vă permite să apucați un obiect HTML cu cursorul și trageți-l în alt loc.
Ce puteți trage și plasa în HTML5?
HTML5 vă permite să faceți ca orice element să poată fi glisat, permițându-vă să-l ridicați cu cursorul și să-l trageți într-o altă locație, care este definită ca un element care se poate fixa. În exemplul de mai jos, încercați să trageți o imagine pe un pătrat:
Această funcționalitate simplifică experiența utilizatorului și chiar permite crearea de jocuri online simple (de exemplu, puteți trage și plasa piese de șah virtuale). Când trageți un element, replica sa transparentă se deplasează împreună cu cursorul până când îl lăsați eliberând butonul mouse-ului.
Din punct de vedere tehnic, Drag and Drop este un API JavaScript adăugat la HTML5. Prin urmare, este important să aveți cel puțin cunoștințe de bază despre scripturi pentru a putea lucra cu această funcționalitate.
Evenimente pentru HTML5 Drag and Drop
În tabelul de mai jos, veți vedea toate evenimentele relevante pentru funcționalitatea Drag and Drop:
| Eveniment | Explicație |
|---|---|
| drag | Cursorul se mișcă în timp ce trageți un element |
| drop | Procesul de glisare se termină |
| dragstart | Cursorul preia elementul și începe să tragă |
| dragend | Butonul mouse-ului este eliberat, scăpând elementul |
| dragenter | Cursorul introduce elementul țintă |
| dragleave | Cursorul lasă elementul țintă |
| dragover | Cursorul se deplasează peste elementul țintă |
Explicație pas cu pas a Drag and Drop
Codarea HTML5 drag and drop pare destul de complicată la prima vedere, deoarece include scripturi în JS. Cu toate acestea, să studiem fiecare parte a procesului pentru a ușura înțelegerea.
Elemente glisabile
Mai întâi, trebuie să vă asigurați că elementul pe care doriți să îl trageți are un HTML5 draggable atributul aplicat și valoarea sa setată la true:
Glisare
Apoi, definiți ce ar trebui să se întâmple după ce trageți un obiect. Puteți face acest lucru apelând un gestionar de evenimente pentru un eveniment dragstart și definirea unei funcții care trebuie executată.
Valoarea și tipul de date al datelor glisate trebuie să fie setate de dataTransfer.setData() metodă:
Eliminare
Datele glisabile HTML5 sunt specificate prin atașarea unui gestionar de evenimente la evenimentul dragover.
Elementele și datele nu pot fi eliminat în alte elemente în mod implicit. Aceasta înseamnă că trebuie să opriți elementul „s comportament implicit utilizând metoda event.preventDefault():
Un eveniment drop apare atunci când datele glisabile HTML5 sunt abandonate. Este apelat de ondrop handler-ul evenimentelor:
Codul final: un exemplu
Practic, aveți nevoie de codul dvs. pentru a putea efectuați patru pași:
- Preveniți acțiunea implicită a browserului web legată de date apelând
preventDefault() - Obțineți datele cu metoda
dataTransfer.getData() - Aplicați elementul glisat pe elementul drop
Să vedem cum funcționează în exemplu de mai jos:
HTML5 Glisați și fixați: sfaturi utile
- Puteți trage diverse tipuri de elemente, inclusiv, dar fără a se limita la fișiere, linkuri, imagini și text.
- De asemenea, puteți trage mai multe elemente simultan. Cu toate acestea, este recomandat să le aveți pe toate în același format pentru coerență.
- Elementele de formular care acceptă introducerea utilizatorului pot fi zone droppable în mod prestabilit.