Trageți și plasați este o caracteristică esențială care îmbunătățește interacțiunea utilizatorului și facilitează o experiență perfectă a utilizatorului. Indiferent dacă doriți să construiți un instrument de încărcare de fișiere, o listă care poate fi sortată sau un joc interactiv, înțelegerea modului de valorificare a capabilităților acestui API este o abilitate crucială pe care trebuie să o aveți în setul dvs. de instrumente de dezvoltare web.
Cuprins
Elementele de bază ale glisării și plasării în HTML
Într-un sistem tipic de glisare și plasare, există două tipuri de elemente: primul tip cuprinde elemente care pot fi glisate pe care utilizatorii le pot muta cu mouse-ul, iar al doilea tip include elemente care pot fi plasate, care specifică de obicei unde utilizatorii pot plasa un element.
Pentru a implementa drag and drop, trebuie să spuneți browserului ce elemente doriți să fie trasabile. Pentru ca un element să fie trasabil de către utilizator, acel element ar trebui să aibă un atribut HTML care poate fi trasat setat la true, astfel:
<div draggable="true">This element is draggable</div>
Când utilizatorul începe să declanșeze un eveniment de tragere, browserul furnizează o imagine „fantomă” implicită care oferă de obicei feedback cu privire la un element care este tras.
Puteți personaliza această imagine furnizând în schimb propria imagine. Pentru a face acest lucru, selectați elementul care poate fi glisat din DOM, creați o nouă imagine care să reprezinte imaginea de feedback personalizată și adăugați un ascultător de eveniment dragstart ca acesta:
let img = new Image();
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png";document.querySelector('div').addEventListener('dragstart', (event)=>{
event.dataTransfer.setDragImage(img, 10, 10);
})
În blocul de cod de mai sus, metoda setDragImage are trei parametri. Primul parametru face referire la imagine. Ceilalți parametri reprezintă decalajele orizontale și, respectiv, verticale ale imaginii. Când rulați codul în browser și începeți să trageți un element, veți observa că imaginea personalizată de glisare a fost înlocuită cu imaginea personalizată setată mai devreme.
Dacă doriți să permiteți o drop, trebuie să preveniți comportamentul implicit anulând atât evenimentele dragenter, cât și dragover, astfel:
const dropElement = document.querySelector("drop-target");dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Înțelegerea interfeței DragEvent
JavaScript prezintă o interfață DragEvent care reprezintă o interacțiune drag-and-drop din partea utilizatorului. Mai jos este o listă de tipuri posibile de evenimente sub interfața DragEvent.
- glisare: utilizatorul declanșează acest eveniment în timp ce trage un element.
- dragend: Acest eveniment se declanșează când operația de tragere se termină sau când utilizatorul o întrerupe. O operațiune tipică de glisare se poate încheia prin eliberarea butonului mouse-ului sau apăsarea tastei de evacuare.
- dragenter: un element tras declanșează acest eveniment atunci când intră într-o țintă de drop validă.
- dragleave: Când elementul tras lasă o țintă de drop, acest eveniment se declanșează.
- dragover: Când utilizatorul trage un element care poate fi glisat peste o țintă, evenimentul se declanșează.
- dragstart: evenimentul se declanșează la începutul unei operațiuni de tragere.
- drop: utilizatorul declanșează acest eveniment atunci când aruncă un element pe o țintă de drop.
Când trageți un fișier în browser dintr-un mediu din afara browserului (de exemplu, managerul de fișiere al sistemului de operare), browserul nu declanșează evenimentele dragstart sau dragend.
DragEvent poate fi util dacă doriți să expediați un eveniment personalizat de tragere în mod programatic. De exemplu, dacă doriți să faceți un div pentru a declanșa evenimente personalizate de tragere la încărcarea paginii, iată cum o faceți. Mai întâi, creați un nou DragEvent() personalizat ca acesta:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');
În blocul de cod de mai sus, customDragStartEvent reprezintă o instanță a lui DragEvent(). În customDragStartEvent, există două argumente de constructor. Primul reprezintă tipul de eveniment de tragere, care poate fi unul dintre cele șapte tipuri de evenimente menționate mai devreme.
Al doilea argument este un obiect cu o cheie dataTransfer reprezentând o instanță a DataTransfer, despre care veți afla mai multe mai târziu în acest ghid. Apoi, luați elementul din care doriți să declanșați evenimentul, din Document Object Model (DOM).
const draggableElement = document.querySelector("#draggable");
Apoi adăugați, ascultătorii evenimentului astfel:
draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
event.dataTransfer.setData('text/plain', 'Hello, world!');
}); draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
});
În primul ascultător de evenimente de mai sus, funcția de apel invers înregistrează textul „Drag start!” și invocă metoda setData pe proprietatea dataTransfer de pe obiectul eveniment. Acum, puteți declanșa evenimentele personalizate astfel:
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
Transferarea datelor cu dataTransfer
Obiectul dataTransfer servește ca punte între elementul sursă (elementul care poate fi glisat) și elementul țintă (zona care poate fi plasată) în timpul unei operații de glisare și plasare. Acționează ca un container de stocare temporară pentru datele pe care doriți să le partajați între aceste elemente.
Aceste date pot lua diferite forme, cum ar fi text, URL-uri sau tipuri de date personalizate, ceea ce le face un instrument versatil pentru implementarea unei game largi de funcționalități drag-and-drop.
Folosind setData() pentru pachetul de date
Pentru a transfera date dintr-un element draggable într-un droppable, veți folosi metoda setData() furnizată de obiectul dataTransfer. Această metodă vă permite să împachetați datele pe care doriți să le transferați și să specificați tipul de date. Iată un exemplu de bază:
element.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
Când un utilizator începe să tragă elementul specificat, setData() împachetează textul „Hello, world!” cu tipul de date text/plain. Aceste date sunt acum asociate cu evenimentul de glisare și pot fi accesate de ținta care poate fi fixată în timpul operației de plasare.
Preluarea datelor cu getData()
La capătul de recepție, în ascultătorul de evenimente al unui element droppable, puteți prelua datele transferate folosind metoda getData():
element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});
Blocul de cod de mai sus preia datele cu același tip de date (text/plain) care a fost setat folosind metoda setData() mai devreme. Acest lucru vă permite să accesați și să manipulați datele transferate după cum este necesar în contextul elementului droppable.
Cazuri de utilizare pentru interfețele drag and drop
Integrarea funcționalității drag-and-drop în aplicațiile dvs. web poate fi o îmbunătățire puternică, dar este esențial să înțelegeți când și de ce ar trebui să o implementați.
- Încărcătoare de fișiere: permiterea utilizatorilor să tragă fișiere direct de pe desktop sau manager de fișiere într-o zonă de plasare desemnată simplifică procesul de încărcare.
- Liste sortabile: dacă aplicația dvs. implică liste de elemente, cum ar fi liste de activități, liste de redare sau galerii de imagini, utilizatorii ar putea aprecia posibilitatea de a reordona elementele prin glisare și plasare.
- Tablouri de bord interactive: pentru instrumentele de vizualizare și raportare a datelor, glisarea și plasarea poate fi o modalitate puternică pentru utilizatori de a-și personaliza tablourile de bord prin rearanjarea widget-urilor și diagramelor.
Ținând cont de accesibilitate
Deși trageți și plasați poate fi atrăgător din punct de vedere vizual și îmbunătăți experiența utilizatorului, este esențial să vă asigurați că implementarea dvs. rămâne accesibilă tuturor utilizatorilor, inclusiv celor cu dizabilități. Furnizați metode alternative de interacțiune, cum ar fi comenzile de la tastatură, pentru a face aplicația incluzivă.