Home-theater-designers
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.
MUO Videoclipul zilei Derulați PENTRU A CONTINUA CU CONȚINUT
Elementele de bază ale glisării și plasării în HTML
Într-un sistem obișnuit 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ă a trasabil atribut HTML setat la Adevărat , ca aceasta:
<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.
cum să ștergeți a doua pagină în cuvânt
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 trage start 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 mai suportabil ș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.
- purtând : 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.
- mai suportabil : 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ă.
- trage start : 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ă.