Home-theater-designers
A fogd és vidd alapvető funkció, amely javítja a felhasználói interakciót és megkönnyíti a zökkenőmentes felhasználói élményt. Függetlenül attól, hogy fájlfeltöltőt, rendezhető listát vagy interaktív játékot szeretne létrehozni, ennek az API-nak a képességeinek kiaknázása elengedhetetlen készség a webfejlesztési eszköztárban.
A nap MUO videója GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ
A Drag and Drop alapjai a HTML-ben
Egy tipikus fogd és vidd rendszerben kétféle elem létezik: az első típus olyan húzható elemeket tartalmaz, amelyeket a felhasználók egérrel mozgathatnak, a második típus pedig olyan eldobható elemeket tartalmaz, amelyek jellemzően meghatározzák, hogy a felhasználók hova helyezhetnek el egy elemet.
A drag and drop megvalósításához meg kell adnia a böngészőnek, hogy mely elemeket szeretné áthúzni. Ahhoz, hogy egy elem a felhasználó által húzható legyen, az elemnek rendelkeznie kell a vonszolható HTML attribútum állítva igaz , mint ez:
ingyenes új filmek online letöltés vagy regisztráció nélkül
<div draggable="true">This element is draggable</div>
Amikor a felhasználó elindít egy húzási eseményt, a böngésző egy alapértelmezett „szellem” képet ad, amely általában visszajelzést ad a húzott elemről.
Ezt a képet személyre szabhatja saját kép megadásával. Ehhez válassza ki a húzható elemet a DOM-ból, hozzon létre egy új képet az egyéni visszajelzési kép megjelenítéséhez, és adjon hozzá egy drag start húzza az eseményfigyelőt így:
külső merevlemez használata xbox one -al
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);
})
A fenti kódblokkban a setDragImage módszernek három paramétere van. Az első paraméter a képre hivatkozik. A többi paraméter a kép vízszintes és függőleges eltolásait jelenti. Amikor futtatja a kódot a böngészőben, és elkezd húzni egy elemet, észre fogja venni, hogy az egyéni húzóképet a korábban beállított egyéni képre cserélték.
Ha engedélyezni kívánja a csökkenést, meg kell akadályoznia az alapértelmezett viselkedést mindkét elviselhetőbb és Dragover események, mint például:
const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
A DragEvent felület megértése
JavaScript funkciók a DragEvent interfész, amely a felhasználó fogd és vidd interakcióját képviseli. Az alábbiakban a lehetséges eseménytípusok listája található DragEvent felület.
- húzza : A felhasználó egy elem húzása közben aktiválja ezt az eseményt.
- hordozó : Ez az esemény akkor aktiválódik, amikor a húzási művelet véget ér, vagy amikor a felhasználó megszakítja azt. Egy tipikus húzási művelet befejezhető az egérgomb felengedésével vagy az Escape billentyű lenyomásával.
- elviselhetőbb : A húzott elem akkor váltja ki ezt az eseményt, amikor érvényes leejtési célt ad meg.
- dragleave : Amikor a húzott elem elhagyja a célpontot, ez az esemény aktiválódik.
- Dragover : Amikor a felhasználó egy húzható elemet húz egy célpont fölé, az esemény aktiválódik.
- drag start : Az esemény a húzási művelet kezdetekor aktiválódik.
- csepp : A felhasználó akkor váltja ki ezt az eseményt, amikor egy elemet dob a célpontra.