API-ul HTML5 drag-and-drop (DnD) înseamnă că aproape orice element de pe o pagină poate deveni tras. În acest articol, vom acoperi elementele de bază ale drag and drop.
Creează conținut care poate fi tras
Merită menționat că în majoritatea browserelor, selecțiile de text, imaginile și linkurile pot fi trase implicit. De exemplu, dacă tragi logo-ul Google în Google Search, vei vedea o imagine fantomă. Imaginea poate fi apoi trasată și plasată în bara de adrese, în elementul <input type="file" /> sau chiar pe desktop. Pentru a face alte tipuri de conținut trasabile, trebuie să folosești API-ul HTML5 DnD.
Pentru a face un obiect draggable, setați elementuldraggable=true。 Tragerea poate fi suportată pentru aproape orice element, inclusiv imagini, fișiere, linkuri, fișiere sau orice markup de pe o pagină.
În exemplul nostru, vom crea o interfață pentru a rearanja unele coloane, care au fost trasate prin CSS Grid. Marcajul de bază pentru aceste coloane este prezentat mai jos, cu proprietatea de tragere setată la true pentru fiecare coloană.
Iată CSS-ul pentru elementele mele din container și cutie. Rețineți că singura funcționalitate CSS legată de DnD este proprietatea cursor: move. Restul codului controlează doar layout-ul și stilul elementelor containerului și cutiei.
În acest moment, vei vedea că poți trage obiectul, dar nu se va întâmpla nimic altceva. Pentru a adăuga funcționalitate DnD, trebuie să folosim API-ul JavaScript.
Ascultă evenimentele drag
Multe evenimente diferite pot fi atașate pentru a monitoriza întregul proces de drag-and-drop.
- Dragstart
- glisa
- Dragenter
- Dragleave
- Dragover
- picătură
- Dragend
Pentru a procesa un flux DnD, ai nevoie de un element sursă (punctul de pornire al tragerii), încărcătura de date (ceea ce încerci să plasezi) și ținta (zona unde se plasează snap-ul). Elementele sursă pot fi imagini, liste, linkuri, obiecte fișier, blocuri HTML etc. Scopul este să accepti zona de drop (sau setul de zone de drop) a datelor pe care utilizatorul încearcă să le plaseze. Ține cont că nu toate elementele pot fi scopuri, de exemplu, imaginile nu pot fi scopuri.
Începe și încheie secvența de drag-and-drop
După definirea proprietății draggable="true" din conținut, atașează un handler de evenimente drag start pentru a începe secvența DnD pentru fiecare coloană.
Acest cod va seta opacitatea coloanei la 40% când utilizatorul începe să tragă, apoi va reveni la 100% la finalul evenimentului de tragere.
Rezultatele pot fi văzute în demonstrația Glitch de mai jos. Dacă tragi un obiect, va deveni opac. Deoarece evenimentul de dragstart vizează elementul sursă, setarea acestui .style.opacity la 40% oferă utilizatorului feedback vizual că elementul selectat în prezent se mișcă. După ce elementul este plasat, elementul sursă revine la opacitate de 100%, deși funcția de plasare nu a fost încă scrisă.
Folosește dragenter, dragover și dragleave pentru a adăuga indicii vizuale suplimentare
Pentru a ajuta utilizatorii să înțeleagă cum să interacționeze cu interfața ta, folosește handlerele de evenimente dragenter, dragover și dragleave. În exemplul următor, coloanele pot fi târâte sau țintite. Pentru a ajuta utilizatorii să înțeleagă acest lucru, când utilizatorul trage un element dincolo de o coloană, marginea acelei coloane devine o linie punctată. De exemplu, poți crea o supraclasă în CSS pentru a reprezenta un element care este o țintă de plasare:
Apoi, configurează un handler de evenimente în JavaScript pentru a adăuga clasa over când tragi pe lângă o coloană și să o elimini când pleci. În handler-ul de dragend, vrem să ne asigurăm și că clasa este îndepărtată la finalul tragerei.
Există câteva aspecte de menționat în acest cod:
Când tragi un element precum un link, trebuie să blochezi comportamentul implicit al browserului, care este navigarea către acel link. Pentru a face acest lucru, apelează e.preventDefault() în evenimentul de dragover. O altă practică bună este să returnezi false în același handler.
Folosește handler-ul de evenimente dragenter pentru a schimba clasele, nu dragover-ul. Dacă folosești dragover, clasa CSS este comutată de mai multe ori deoarece evenimentul dragover continuă să se declanșeze când coloana plutește. În cele din urmă, acest lucru va face ca rendererul browserului să facă multă muncă inutilă. Cel mai bine este să păstrezi mereu redesenarea la minimum. Dacă ai nevoie să folosești evenimente dragover dintr-un motiv oarecare, ia în considerare limitarea sau eliminarea ascultătorilor de evenimente.
Finalizează plasamentul
Pentru a gestiona plasarea propriu-zisă, adaugă un ascultător de eveniment pentru evenimentul de eliminare. Într-un drop handler, trebuie să blochezi comportamentul implicit de plasare al browserului, care de obicei este un fel de redirecționare enervantă. e.stopPropagation() poate fi apelat pentru a preveni declanșarea DOM-ului evenimentului.
Asigură-te că înregistrezi noul handler în celălalt handler:
Dacă rulezi codul în acest moment, proiectul nu va fi plasat într-o locație nouă. Pentru a realiza acest lucru, trebuie să folosești un obiect DataTransfer.
Proprietatea dataTransfer este locul unde au loc toate minunile DnD. Salvează fragmentele de date trimise în operația de tragere. dataTransfer este setat în evenimentul de tragere și este citit/procesat în evenimentul drop. Cheamă e.dataTransfer.setData(mimeType, dataPayload) pentru a seta tipul MIME și data payload al obiectului.
În exemplul următor, vom permite utilizatorilor să rearanjeze ordinea coloanelor. Pentru a face acest lucru, mai întâi trebuie să stochezi HTML-ul elementului sursă la începutul trasării:
Gestionează plasarea coloanei în evenimentul drop, setează HTML-ul coloanei sursă pe HTML-ul coloanei țintă unde este plasată, verifică mai întâi dacă coloana țintă trasă și lăsată de utilizator este aceeași cu coloana sursă.
Mai multe proprietăți de rezistență la înainare
Obiectul dataTransfer expune proprietăți care sunt folosite pentru a oferi feedback vizual utilizatorului în timpul procesului de tragere. Aceste proprietăți pot fi folosite și pentru a controla modul în care fiecare țintă de plasare răspunde la anumite tipuri de date.
- dataTransfer.effectAllowed limitează "tipul de drag" pe care un utilizator îl poate efectua asupra unui element. Este folosit în modelul de gestionare drag-and-drop pentru a iniția dropEffect în timpul evenimentelor de dragenter și dragover. Această proprietate poate fi setată la următoarele valori: none, copy, copyLink, copyMove, link, linkMove, move, all și uninitialized.
- dataTransfer.dropEffect controlează feedback-ul oferit utilizatorului în timpul evenimentelor dragenter și dragover. Când utilizatorul plutește deasupra elementului țintă, cursorul browserului va indica tipul de acțiune ce trebuie efectuată (de exemplu, copiere, mutare etc.). Efectul poate fi unul dintre următoarele valori: niciunul, copierea, legătura, mutarea.
- e.dataTransfer.setDragImage(imgElement, x, y) indică faptul că feedback-ul implicit "ghost image" al browserului nu este folosit, ci există o opțiune de a seta pictograma de drag.
Încărcarea fișierelor prin trasare și plasare
Următorul exemplu simplu folosește o coloană ca sursă de drag și ca țintă de drag. Acest lucru poate fi observat în interfață atunci când utilizatorul este rugat să rearanjeze elementele. În unele cazuri, tragerea țintei și tragerea sursei pot fi diferite, cum ar fi într-o interfață în care utilizatorul trebuie să selecteze o imagine ca imagine principală a produsului, trăgând imaginea selectată pe țintă.
Drag and drop este adesea folosit pentru a permite utilizatorilor să tragă elemente de pe desktop în aplicație. Principala diferență este handler-ul de lansare. Fără a folosi dataTransfer.getData() pentru a accesa fișierul, datele fișierului vor fi incluse în proprietatea dataTransfer.files:
Link original:Autentificarea cu hyperlink este vizibilă.
|
Postat la 26-04-2022 10:30:50
|
|
|
|
Postat la 26-04-2022 21:27:25
|
