Utilizarea API-ului HTML5 Drag and Drop

API-ul HTML5 Drag and Drop (DnD) înseamnă că putem face aproape orice element de pe pagina noastră glisabil. În acest post vom explica elementele de bază ale Drag și Drop.

Crearea de conținut glisabil #

Merită să menționăm că în majoritatea browserelor, selecțiile de text, imaginile și linkurile pot fi glisate în mod implicit. De exemplu, dacă trageți Logo Google în Căutarea Google veți vedea imaginea fantomă. Imaginea poate fi apoi aruncată în bara de adrese, un element <input type="file" /> sau chiar pe desktop. Pentru a face ca alte tipuri de conținut să poată fi glisate trebuie să utilizați API-urile HTML5 DnD.

Pentru a crea un obiect care poate fi glisat draggable=true pe acel element. Doar despre orice se pot trage, imagini, fișiere , link-uri, fișiere sau orice markup de pe pagina dvs.

În exemplul nostru, creăm o interfață pentru a rearanja unele coloane, care au fost prezentate cu CSS Grid. Marcajul de bază pentru coloanele mele arată ca aceasta, fiecare coloană având

atributul setat latrue.

Aici este CSS-ul pentru elementele mele de container și cutie. Rețineți că singurul CSS legat de funcționalitatea DnD este proprietatea cursor: move. Restul codului controlează doar aspectul și stilul elementelor containerului și cutiei.

În acest moment veți descoperiți că puteți trage elementele, totuși nu se va întâmpla nimic altceva. Pentru a adăuga funcționalitatea DnD, trebuie să folosim API-ul JavaScript.

Ascultarea pentru tragerea evenimentelor #

Există un număr a diferitelor evenimente de atașat pentru monitorizarea întregului proces de drag and drop.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

Pentru a gestiona fluxul DnD, aveți nevoie de un fel de element sursă (de unde provine dragul), pa yload (ceea ce încercați să renunțați) și o țintă (o zonă pentru a prinde picătura). Elementul sursă poate fi o imagine, o listă, un link, un obiect fișier, un bloc de HTML, etc. (sau set de zone de drop) care acceptă datele pe care utilizatorul încearcă să le renunțe. Rețineți că nu toate elementele pot fi ținte, de exemplu o imagine nu poate fi o țintă.

Început și sfârșit o secvență de glisare și plasare #

Odată ce aveți atributele draggable="true" definite în conținutul dvs., atașați un gestionar de evenimente dragstart pentru a începe secvența DnD pentru fiecare coloană.

Acest cod va seta opacitatea coloanei la 40% atunci când utilizatorul începe să o tragă, apoi o va readuce la 100% când se termină evenimentul de tragere.

Rezultatul poate fi văzut în demo-ul Glitch de mai jos. Trageți un element și acesta devine opac. Deoarece ținta evenimentului dragstart este elementul sursă, setarea this.style.opacity la 40% oferă utilizatorului feedback vizual că elementul este selecția curentă în curs de mutare. Odată ce ați abandonat elementul, deși funcționalitatea de eliminare nu este la locul său, elementul sursă revine la 100% opacitate.

Adăugați indicii vizuale suplimentare cu dragenter, dragover și dragleave #

Pentru a ajuta utilizatorul să înțeleagă cum să interacționeze cu interfața dvs., utilizați dragenter, dragover și dragleave handlers de evenimente. În acest exemplu, coloanele sunt ținte de fixare pe lângă faptul că pot fi glisate. Ajutați utilizatorul pentru a înțelege acest lucru făcând marginea întreruptă în timp ce țin un element glisat deasupra unei coloane. De exemplu, în CSS puteți crea o clasă over pentru a reprezenta elemente care sunt ținte de cădere:

Apoi, în J avaScript configurați gestionarele de evenimente, adăugați clasa over când coloana este trasă și scoateți-o când plecăm. În dragend handler ne asigurăm, de asemenea, să eliminăm clasele la sfârșitul glisării.

Există câteva puncte care merită acoperite în acest cod :

• În cazul în care trageți ceva asemănător unui link, trebuie să preveniți comportamentul implicit al browserului, care este să navigați la acel link. Pentru a face acest lucru, apelați e.preventDefault() în evenimentul dragover. O altă bună practică este să returnați false în același handler.
• Manipulatorul de evenimente dragenter este utilizat pentru a comuta clasa over în loc de dragover .Dacă utilizați dragover, clasa CSS ar fi activată de multe ori, deoarece evenimentul dragover a continuat să se declanșeze pe o coloană. care ar provoca randatorul browserului pentru a face o cantitate mare de muncă inutilă. Păstrarea redesenelor la minimum este întotdeauna o idee bună.Dacă trebuie să utilizați evenimentul dragover pentru ceva, vă recomandăm să restrângeți sau să renunțați la ascultătorul dvs. de evenimente.

Finalizarea picăturii #

Pentru a procesa picătura reală, adăugați un ascultător de evenimente pentru evenimentul drop. În handlerul drop, va trebui să preveniți comportamentul implicit al browserului pentru căderi, care este de obicei un fel de redirecționare enervantă. Puteți împiedica evenimentul să clocotească în DOM apelând e.stopPropagation().

Dacă rulați codul în acest moment, elementul nu va cădea în noua locație. Pentru a realiza acest lucru, trebuie să utilizați DataTransfer obiect.

Proprietatea dataTransfer este locul în care se întâmplă toată magia DnD. Deține piesa de date trimisă într-o acțiune de tragere. dataTransfer este setat în evenimentul dragstart și citit / tratat în evenimentul drop. Apelarea e.dataTransfer.setData(mimeType, dataPayload) vă permite să setați obiectul „s Tipul MIME și sarcina utilă a datelor.

În acest exemplu, vom permite utilizatorilor să rearanjeze ordinea coloanelor. Pentru aceasta, mai întâi trebuie să stocați elementul sursă HTML când trageți începe:

În evenimentul drop picătura coloanei, setând codul HTML al coloanei sursă la codul HTML al coloanei țintă pe care ați lăsat-o, verificând mai întâi dacă utilizatorul nu cade înapoi pe aceeași coloană din care a tras-o.

Puteți vedea rezultatul în următoarea demonstrație. Trageți și eliberați coloana A deasupra coloanei B și observați cum își schimbă locurile:

Mai mult trasarea proprietăților #

Obiectul dataTransfer expune proprietăți 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 fixare răspunde la un anumit tip de date.

• dataTransfer.effectAllowed restric Ce tip de „drag” poate efectua utilizatorul asupra elementului. Acesta este utilizat în modelul de procesare drag-and-drop pentru a inițializa dropEffect în timpul dragenter și dragover evenimente. Proprietatea poate fi setată la următoarele valori: none, copy, copyLink, copyMove, link, linkMove, move, all și uninitialized.
• dataTransfer.dropEffect controlează feedback-ul care i se dă utilizatorului în timpul dragenter și dragover evenimente. Când utilizatorul trece peste un element țintă, cursorul browserului va indica ce tip de operație va avea loc (de ex. o copie, o mutare etc.). Efectul poate lua una dintre următoarele valori: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) înseamnă că în loc să utilizați browserul ” Feedback-ul implicit „imagine fantomă”, puteți seta opțional o pictogramă de glisare.

Încărcare fișier cu glisare și fixare #

Acest exemplu simplu folosește o coloană atât ca glisare sursă și glisare țintă. Acest lucru poate fi văzut într-o interfață de utilizare în care utilizatorul este rugat să rearanjeze articolele. În unele situații, glisarea și sursa pot fi diferite, cum ar fi o interfață în care utilizatorul trebuie să selecteze o imagine pentru a fi imaginea principală pentru un produs prin tragerea imaginii selectate pe o țintă.

Drag and Drop este frecvent utilizat pentru a permite utilizatorilor să tragă articole de pe desktopul lor într-o aplicație. Diferența principală este în drop. În loc să utilizați dataTransfer.getData() pentru a accesa fișierele, datele lor vor fi Vom fi conținute în proprietatea dataTransfer.files:

Puteți găsi mai multe informații despre acest lucru în glisare și plasare personalizate.