A HTML Drag and Drop API használata

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. Akár fájlfeltöltőt, akár rendezhető listát, akár interaktív játékot szeretne létrehozni, ennek az API-nak a képességeinek kiaknázásának megértése elengedhetetlen készség az interneten fejlesztési eszköztár.

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 mozgatható, a második típus pedig olyan eldobható elemeket tartalmaz, amelyek jellemzően meghatározzák, hogy a felhasználók hol helyezhetnek el egy elem.

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:

<divdraggable="true">This element is draggablediv>

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 dragstart húzza az eseményfigyelőt így:

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 dragenter é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.
• 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 ejtőcél fölé, az esemény aktiválódik.
• dragstart: Az esemény a húzási művelet kezdetekor indul el.
• csepp: A felhasználó akkor váltja ki ezt az eseményt, amikor egy elemet egy célpontra dob.

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.

DragEvent hasznos lehet, ha egyéni húzási eseményt szeretne programozottan elküldeni. Például, ha azt szeretné, hogy a div egyéni húzási események oldalbetöltéskor történő aktiválásához a következőképpen teheti meg. Először hozzon létre egy új egyéniséget DragEvent() mint ez:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

A fenti kódblokkban customDragStartEvent példányát képviseli DragEvent(). Ban ben customDragStartEvent, 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 objektum a adatátvitel egy példányát képviselő kulcs Adatátvitel, amelyről ebben az útmutatóban később többet is megtudhat. Ezután fogja meg azt az elemet, amelyből az eseményt ki szeretné indítani, a Dokumentumobjektum modell (DOM).

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!" és meghívja a setData módszer a adatátvitel ingatlan a esemény tárgy. 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 adatátvitel Az 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 történő átviteléhez használja a setData() által biztosított módszer adatátvitel tárgy. 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, setData() csomagokba a "Hello, world!" az adattípussal szöveges/egyszerű. 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én belül, az átvitt adatokat a segítségével lehet lekérni getData() módszer:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

A fenti kódblokk ugyanazzal az adattípussal kéri le az adatokat (szöveges/egyszerű), amelyet a setData() módszer korábban. Ez lehetővé teszi az átvitt adatok elérését és szükség szerinti kezelését az eldobható elem környezetében.

A fogd és vidd interfészekhez használható esetek

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: Mert adatvizualizációs és jelentéskészítő eszközök, 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.