Implementarea funcționalității drag-and-drop este mai ușoară decât credeți. Aflați cum în acest ghid util.
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 capacităților acestui API este o abilitate crucială pe care trebuie să o aveți pe web trusa de instrumente de dezvoltare.
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 trase de către utilizatori. se poate deplasa cu un mouse, iar al doilea tip include elemente droppable 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ă a
trasabilatribut HTML setat la Adevărat, ca aceasta:<divdraggable="true">This element is draggablediv>
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 dragstart trageți ascultătorul de evenimente astfel:
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, setDragImage metoda 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 scădere, trebuie să preveniți comportamentul implicit anulând atât dragenter și trage peste evenimente, ca acesta:
const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Înțelegerea interfeței DragEvent
Caracteristici JavaScript a DragEvent interfață care reprezintă o interacțiune drag-and-drop din partea utilizatorului. Mai jos este o listă de tipuri posibile de evenimente sub DragEvent interfata.
- trage: 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 introduce o țintă de drop validă.
- dragleave: Când elementul tras lasă o țintă de drop, acest eveniment se declanșează.
- trage peste: 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.
- cădere brusca: utilizatorul declanșează acest eveniment atunci când aruncă un element pe o țintă.
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ă dragstart sau dragend evenimente.
DragEvent poate fi util dacă doriți să expediați un eveniment personalizat de tragere în mod programatic. De exemplu, dacă doriți să o div pentru a declanșa evenimente personalizate de tragere la încărcarea paginii, iată cum procedați. Mai întâi, creați o nouă personalizare DragEvent() ca aceasta:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');
În blocul de cod de mai sus, customDragStartEvent reprezintă un exemplu de 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 a transfer de date cheie reprezentând o instanță de Transfer de date, despre care veți afla mai multe mai târziu în acest ghid. Apoi, apucaț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ă setData metoda pe transfer de date proprietate de pe eveniment obiect. Acum, puteți declanșa evenimentele personalizate astfel:
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
Transferarea datelor cu dataTransfer
The transfer de date obiectul servește drept punte între elementul sursă (elementul care poate fi glisat) și elementul țintă (zona care poate fi fixată) î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 de la un element care poate fi glisat la unul care poate fi plasat, veți folosi setData() metoda oferită de transfer de date obiect. 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 „Bună, lume!” cu tipul de date text/ simplu. 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 cadrul ascultătorului de evenimente al unui element droppable, puteți prelua datele transferate folosind Obțineți date() metodă:
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/ simplu) care a fost setat folosind setData() metoda 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 instrumente de vizualizare și raportare a datelor, drag and drop 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ă.