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.
Tartalomjegyzék
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 egy húzható HTML attribútumot igaz értékre kell állítani, például:
<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 visszacsatolási kép megjelenítéséhez, és adjon hozzá egy dragstart drag eseményfigyelőt a következő módon:
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 metódusnak 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 szeretné a leejtést, meg kell akadályoznia az alapértelmezett viselkedést a dragenter és a dragover események törlésével, 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
A JavaScript tartalmaz egy DragEvent felületet, 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ó a DragEvent felület alatt.
- drag: A felhasználó egy elem húzása közben aktiválja ezt az eseményt.
- dragend: 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.
- dragenter: 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.
- dragstart: Az esemény a húzási művelet kezdetekor indul el.
- drop: A felhasználó akkor váltja ki ezt az eseményt, amikor egy elemet ledob egy célpontra.
Ha egy fájlt a böngészőn kívüli környezetből (például az operációs rendszer fájlkezelőjéből) húz a böngészőbe, a böngésző nem indítja el a dragstart vagy dragend eseményeket.
A DragEvent hasznos lehet, ha egyéni húzási eseményt szeretne programozottan elküldeni. Ha például azt szeretné, hogy egy div egyéni húzási eseményeket aktiváljon az oldalbetöltéskor, akkor ezt a következőképpen teheti meg. Először hozzon létre egy új egyéni DragEvent()-et, például:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');
A fenti kódblokkban a customDragStartEvent a DragEvent() egy példányát képviseli. A customDragStartEventben két konstruktor argumentum van. Az első a drag eseménytípust jelenti, amely a korábban említett hét eseménytípus egyike lehet.
A második argumentum egy adatátviteli kulccsal rendelkező objektum, amely a DataTransfer egy példányát képviseli, amelyről az útmutató későbbi részében többet is megtudhat. Ezután fogja meg a dokumentumobjektum-modellből (DOM) azt az elemet, amelyből az eseményt ki szeretné indítani.
const draggableElement = document.querySelector("#draggable");
Ezután adjuk hozzá, hogy az eseményfigyelők így működjenek:
draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
event.dataTransfer.setData('text/plain', 'Hello, world!');
}); draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
});
A fenti első eseményfigyelőben a visszahívási funkció naplózza a „Húzás megkezdve!” szöveget. és meghívja a setData metódust az eseményobjektum dataTransfer tulajdonságán. Most az alábbi módon indíthatja el az egyéni eseményeket:
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
Adatátvitel a dataTransfer segítségével
A dataTransfer objektum hídként szolgál a forráselem (a húzható elem) és a célelem (az eldobható terület) között a fogd és vidd művelet során. Ideiglenes tárolótárolóként működik azon adatok számára, amelyeket meg szeretne osztani ezen elemek között.
Ezek az adatok különböző formájúak lehetnek, például szöveges, URL-címek vagy egyéni adattípusok, így sokoldalú eszköz a fogd és vidd funkciók széles skálájának megvalósításához.
A setData() használata az adatok csomagolásához
Az adatok áthúzható elemről eldobható elemre való átviteléhez a dataTransfer objektum által biztosított setData() metódust kell használni. Ez a módszer lehetővé teszi az átvinni kívánt adatok becsomagolását és az adattípus megadását. Íme egy alapvető példa:
element.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
Amikor a felhasználó elkezdi húzni a megadott elemet, a setData() becsomagolja a „Hello, world!” szöveget. szöveg/sima adattípussal. Ezek az adatok most a húzási eseménnyel vannak társítva, és az eldobható cél elérheti őket az eldobási művelet során.
Adatok lekérése a getData() segítségével
A fogadó oldalon, egy eldobható elem eseményfigyelőjében, a getData() metódussal kérheti le az átvitt adatokat:
element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});
A fenti kódblokk ugyanazzal az adattípussal (szöveg/sima) kéri le az adatokat, amelyeket korábban a setData() metódussal állítottak be. Ez lehetővé teszi az átvitt adatok elérését és kezelését az eldobható elem környezetében.
Használja a Drag and Drop interfészek eseteit
A fogd és vidd funkciók webalkalmazásaiba való integrálása jelentős fejlesztés lehet, de elengedhetetlen annak megértése, hogy mikor és miért érdemes megvalósítani.
- Fájlfeltöltők: Leegyszerűsíti a feltöltési folyamatot, ha lehetővé teszi a felhasználók számára, hogy a fájlokat közvetlenül az asztalukról vagy a fájlkezelőjükről egy kijelölt területre húzzák.
- Rendezhető listák: Ha az alkalmazás elemlistákat, például feladatlistákat, lejátszási listákat vagy képgalériákat tartalmaz, a felhasználók értékelhetik az elemek átrendezésének lehetőségét a fogd és vidd módszerrel.
- Interaktív irányítópultok: Az adatok megjelenítéséhez és jelentéskészítő eszközeihez a fogd és vidd hatékony módja lehet a felhasználóknak az irányítópultok testreszabására a widgetek és diagramok átrendezésével.
A kisegítő lehetőségek szem előtt tartása
Bár a drag and drop vizuálisan tetszetős lehet, és javítja a felhasználói élményt, kulcsfontosságú annak biztosítása, hogy a megvalósítás minden felhasználó számára elérhető maradjon, beleértve a fogyatékkal élőket is. Biztosítson alternatív interakciós módszereket, például billentyűzetvezérlőket, hogy az alkalmazást átfogóvá tegye.