HTML5 – Drag & drop (Română)
Drag and Drop (DnD) este un concept puternic de interfață cu utilizatorul care facilitează copierea, reordonarea și ștergerea de articole cu ajutorul clicurilor mouse-ului. Acest lucru permite utilizatorului să facă clic și să țină apăsat butonul mouse-ului deasupra unui element, să îl tragă într-o altă locație și să elibereze butonul mouse-ului pentru a plasa elementul acolo.
Pentru a obține funcționalitatea de glisare și fixare cu HTML4 tradițional, dezvoltatorii ar trebui fie să fie nevoiți să utilizeze programare JavaScript complexă sau alte cadre JavaScript cum ar fi jQuery etc.
Acum HTML 5 a venit cu un API Drag and Drop (DnD) care aduce suport DnD nativ în browser este mult mai ușor de codat.
HTML 5 DnD este acceptat de toate browserele majore precum Chrome, Firefox 3.5 și Safari 4 etc.
Trageți și fixați evenimente
Există un număr de evenimente care sunt declanșate în timpul diferitelor etape ale operației de drag and drop. Aceste evenimente sunt enumerate mai jos –
| Sr.No. | Evenimente & Descriere |
|---|---|
| 1 |
dragstart Se declanșează când utilizatorul începe să tragă obiectul. |
| 2 |
dragenter A fost declanșat când mouse-ul este mutat pentru prima dată peste elementul țintă în timp ce are loc o tragere. Un ascultător pentru acest eveniment ar trebui să indice dacă este permisă o picătură peste această locație. Dacă nu există ascultători sau ascultătorii nu efectuează nicio operațiune, atunci nu este permisă o scădere în mod implicit. |
| 3 |
glisare Acest eveniment este declanșat pe măsură ce mouse-ul este deplasat peste un element când are loc o glisare. De cele mai multe ori, operația care are loc în timpul unui ascultător va fi aceeași cu evenimentul dragenter. |
| 4 |
dragleave Acest eveniment este declanșat când mouse-ul părăsește un element în timp ce are loc un drag. Ascultătorii ar trebui să elimine orice marcatori de evidențiere sau de inserare utilizați pentru feedback. |
| 5 |
glisați Se declanșează de fiecare dată când mouse-ul este mutat în timp ce obiectul este glisat. |
| 6 |
drop Evenimentul drop este declanșat asupra elementului în care a avut loc drop-ul la sfârșitul operației de tragere. Un ascultător ar fi responsabil pentru recuperarea datelor trase și inserarea acestora în locația de plecare. |
| 7 |
dragend Se declanșează când utilizatorul eliberează butonul mouse-ului în timp ce trage un obiect. |
Notă – Rețineți că sunt declanșate numai evenimentele de tragere; evenimentele mouse-ului, cum ar fi mousemove, nu sunt declanșate în timpul unei operații de tragere.
Obiectul Transfer de date
Metodele de ascultare a evenimentelor pentru toate evenimentele de tragere și plasare acceptă obiectul eveniment care are un atribut readonly dataTransfer.
Event.dataTransfer returnează obiectul DataTransfer asociat evenimentului după cum urmează –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
Obiectul DataTransfer conține date despre tragere și operațiunea drop. Aceste date pot fi recuperate și setate în funcție de diferite atribute asociate cu obiectul DataTransfer așa cum se explică mai jos –
| Sr.No. | Atributele DataTransfer și descrierea lor |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Returnează o listă DOMStringList formate care au fost setate în evenimentul dragstart. În plus, dacă fișierele sunt trase, atunci unul dintre tipuri va fi șirul „Fișiere”. |
| 4 |
dataTransfer.clearData () Elimină datele din formatele specificate. Elimină toate datele dacă argumentul este omis. |
| 5 |
dataTransfer.setData (format, date) Adaugă datele specificate. |
| 6 |
data = dataTransfer.getData (format) Returnează datele specificate. Dacă nu există astfel de date, returnează șirul gol. |
| 7 |
dataTransfer.files Returnează o listă de fișiere a fișierelor trase, dacă există. |
| 8 |
dataTransfer.setDragImage (element, x, y) Folosește elementul dat pentru a actualiza feedback-ul de tragere, înlocuind orice feedback specificat anterior. |
| 9 |
dataTransfer.addElement (element) Adaugă elementul dat la lista elementelor utilizate pentru a reda feedback-ul de tragere. |
Procesul de glisare și fixare
pașii care trebuie efectuați pentru implementarea operației Drag and Drop –
Pasul 1 – Realizarea unui obiect glisabil
Iată pașii care trebuie luați –
-
Dacă doriți să trageți un element, trebuie să setați atributul glisabil la adevărat pentru acel element.
-
Setați un ascultător de evenimente pentru răstoarnă datele pe care le trageți.
-
Dragstart-ul ascultătorului de evenimente va seta efectele permise (copiere, mutare, legătură sau o combinație).
Următorul este exemplul pentru a face un obiect glisabil –
Acest lucru va produce următorul rezultat –
Pasul 2 – Lăsarea obiectului
Pentru a accepta un drop, ținta drop trebuie să asculte cel puțin trei evenimente.
-
Evenimentul dragenter, care este utilizat pentru a determina dacă ținta drop trebuie să accepte sau nu dropul . Dacă picătura trebuie acceptată, atunci acest eveniment trebuie anulat.
-
Evenimentul de dragover, care este utilizat pentru a determina ce feedback trebuie afișat utilizatorului. Dacă evenimentul este anulat, atunci feedback-ul (de obicei cursorul) este actualizat pe baza valorii atributului dropEffect.
-
În cele din urmă, evenimentul drop, care permite scăderea reală care urmează să fie efectuat.
Urmează exemplul de a arunca un obiect într-un alt obiect –
Acest lucru va produce următorul rezultat –