A HTML5 Drag and Drop API használata

A HTML5 Drag and Drop (DnD) API azt jelenti, hogy szinte minden elemet húzhatóvá tehetünk az oldalunkon. Ebben a bejegyzésben elmagyarázzuk a Drag alapjait és Drop.

Húzható tartalom létrehozása #

Érdemes megjegyezni, hogy a legtöbb böngészőben a szövegválasztások, képek és hivatkozások alapértelmezés szerint húzhatók. Például, ha a A Google logó a Google Keresésben látni fogja a szellemképet. Ezután a kép eldobható a címsávban, egy <input type="file" /> elemben vagy akár az asztalon. Más típusú tartalmak húzhatóvá tételéhez használnia kell a HTML5 DnD API-kat.

Az objektum húzható készletének draggable=true készítéséhez az elemet. Bármi, ami húzással engedélyezhető, képek, fájlok , linkek, fájlok vagy bármilyen jelölés az oldalon.

Példánkban egy felületet hozunk létre néhány oszlop átrendezéséhez, amelyeket a CSS Grid-rel készítettünk. Az oszlopaim alapvető jelölése ezt minden oszlopban a

attribútum beállításatrue.

Itt van a tároló- és dobozelemek CSS-je. Ne feledje, hogy az egyetlen CSS A DnD funkcionalitással kapcsolatos cursor: move tulajdonság. A kód többi része csak a tároló és a doboz elemek elrendezését és stílusát szabályozza.

Ezen a ponton találja meg, hogy húzhatja az elemeket, de semmi más nem fog történni. A DnD funkció hozzáadásához a JavaScript API-t kell használnunk.

Az események meghúzása hallgatása #

Számos szám van különböző események, amelyekhez csatolhatjuk az egész fogd és vidd folyamatot.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

A DnD folyamat kezeléséhez valamilyen forrás elemre van szükség (ahonnan a húzás származik), az adat yload (amit megpróbálsz ledobni), és egy cél (egy terület, ahová a cseppet elkapod). A forráselem lehet kép, lista, link, fájlobjektum, HTML blokk stb. A cél a dobási zóna (vagy dobási zónák halmaza), amely elfogadja azokat az adatokat, amelyeket a felhasználó megpróbál eldobni. Ne feledje, hogy nem minden elem lehet célpont, például egy kép nem lehet cél.

Kezdés és befejezés drag and drop szekvencia #

Miután megadta a draggable="true" attribútumokat a tartalmához, csatoljon egy dragstart eseménykezelőt az egyes oszlopok DnD-sorrendjének elindításához.

Ez a kód az oszlop átlátszatlanságát 40% -ra állítja, amikor a felhasználó elkezdi húzni, majd 100% -ra állítja vissza, amikor a húzási esemény befejeződik.

Az eredmény az alábbi Glitch bemutatóban látható. Húzza az elemet, és átláthatatlanná válik. Mivel a dragstart esemény célpontja a forráselem, a this.style.opacity 40% -ra állítása megadja a felhasználónak vizuális visszajelzés arról, hogy az elem az éppen mozgatott kijelölés. Miután eldobta az elemet, bár a dobási funkció nincs a helyén, a forráselem 100% -os átlátszatlanságra tér vissza.

További vizuális jelek hozzáadása dragenter, dragover és dragleave #

A dragenter, dragover és dragleave eseménykezelők. Ebben a példában az oszlopok csepegtető célok mellett húzhatók. Segítsen a felhasználónak ennek megértéséhez tegye szaggatottá a szegélyt, amikor az áthúzott elemet egy oszlop felett tartja. Például a CSS-ben létrehozhat egy over osztályt, amelyek a csepp célpontok elemét képviselik:

Ezután a J Az avaScript beállította az eseménykezelőket, az oszlop áthúzásakor adja hozzá a over osztályt, és távozáskor távolítsa el. Az dragend handler-t arra is ügyeljünk, hogy távolítsuk el az osztályokat a húzás végén.

Ebben a kódban van néhány pont, amelyet érdemes lefedni. :

• Valamilyen hivatkozás húzása esetén meg kell akadályoznia a böngésző alapértelmezett viselkedését, vagyis a hivatkozásra való navigációt. Ehhez hívja a e.preventDefault() a dragover eseményben. Egy másik jó gyakorlat az, hogy a false -t visszaadja ugyanabban a kezelőben.
• A dragenter eseménykezelővel a over osztályt lehet váltani a dragover helyett. .Ha a dragover -t használja, a CSS osztály sokszor váltaná, mivel az dragover esemény folytatta az oszlop lebegését. Végül, ez okozná a A böngésző renderelője nagy mennyiségű felesleges munkát végez. Az újrarajzolások minimálisra tartása mindig jó ötlet.Ha valamihez a dragover eseményt kell használnia, fontolja meg az eseményhallgató fojtását vagy visszavonását.

A drop #

A tényleges csepp feldolgozásához adjon hozzá eseményfigyelőt a drop eseményhez. A drop kezelőben meg kell akadályoznia a böngésző alapértelmezett viselkedése a dropok esetében, amely általában valamiféle bosszantó átirányítás. Megakadályozhatja, hogy az esemény felbomlik a DOM-ban, ha felhívja a e.stopPropagation() hívást.

Ha ezen a ponton futtatja a kódot, az elem nem esik le az új helyre. Ennek eléréséhez a DataTransfer objektum.

A dataTransfer tulajdonság az, ahol az összes DnD varázslat megtörténik. Tartja a húzási műveletben elküldött adatokat. be van állítva a dragstart eseményben, és a drop eseményben olvasható / kezelhető. A e.dataTransfer.setData(mimeType, dataPayload) hívás lehetővé teszi az objektum beállítását “s MIME típus és adat hasznos terhelés.

Ebben a példában lehetővé tesszük a felhasználók számára az oszlopok sorrendjének átrendezését. Ehhez először a forrás elem HTML-jét kell tárolnia, amikor az húzódik kezdődik:

A feldolgozott drop eseményben az oszlop elejtése, a forrásoszlop HTML-jének beállítása a megcélzott oszlop HTML-jére, először ellenőrizze, hogy a felhasználó nem ugrik-e vissza ugyanarra az oszlopra, ahonnan húzott.

Láthatja az eredmény a következő bemutatóban. Húzza és engedje el az A oszlopot a B oszlop tetején, és vegye észre, hogyan cserélnek helyet:

Tovább tulajdonságok húzása #

A dataTransfer objektum olyan tulajdonságokat tár fel, amelyek vizuális visszajelzést adnak a felhasználónak a húzási folyamat során. Ezek a tulajdonságok arra is használhatók, hogy szabályozzák, hogy az egyes drop célok adott adattípusra reagál.

• dataTransfer.effectAllowed korlátozás ts milyen “húzás” -t hajthat végre a felhasználó az elemen. A fogd és vidd feldolgozási modellben a dropEffect inicializálására szolgál a és dragover események. A tulajdonság a következő értékekre állítható be: none, copy, copyLink, copyMove, link, linkMove, move, all és uninitialized.
• dataTransfer.dropEffect vezérli azt a visszajelzést, amelyet a felhasználó a dragenter és dragover események. Amikor a felhasználó egy célelem fölé viszi az egeret, a böngésző kurzora megmutatja, hogy milyen típusú műveletre kerül sor (pl. másolat, áthelyezés stb.). A hatás az alábbi értékek egyikét veheti fel: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) azt jelenti, hogy a böngésző használata helyett ” Az alapértelmezett “szellemkép” visszajelzésként opcionálisan beállíthat egy húzási ikont.

Fájl feltöltése húzással #

Ez az egyszerű példa egy oszlopot használ mind a húzza a forrást és húzza a célt. Ez egy felhasználói felületen látható, ahol a felhasználót arra kérik, hogy rendezze át az elemeket. Bizonyos helyzetekben a húzási cél és a forrás eltérő lehet, például egy felület, ahol a felhasználónak egy képet kell kiválasztania egy termék fő képe a kijelölt kép célra húzásával.

A Drag and Drop-ot gyakran használják arra, hogy a felhasználók az elemeket az asztalukról egy alkalmazásba húzzák. A fő különbség a drop kezelő. Ahelyett, hogy a fájlok eléréséhez dataTransfer.getData() -et használna, azok adatai A dataTransfer.files tulajdonság tartalmazza:

Erről további információt az Egyéni fogd és vidd részben találhat.