JavaScript húzása

Összefoglaló: ebben az oktatóanyagban megismerheti a JavaScript drag and drop API-t.

Bevezetés JavaScript drag and drop API

A HTML5 hivatalosan bevezette a fogd és vidd specifikációt. A legtöbb modern webböngésző a HTML5 specifikáció alapján natív fogd és vidd funkciót valósított meg.

Alapértelmezés szerint csak a kép és a szöveg húzható. Kép húzásához egyszerűen tartsa lenyomva az egérgombot, majd mozgassa azt. A szöveg húzásához ki kell emelnie néhány szöveget, és ugyanúgy kell húznia, mint egy képet.

A HTML5 specifikáció megadja, hogy szinte az összes elem húzható. Az elem húzhatóvá tételéhez adja hozzá a draggable tulajdonságot a true értékkel a HTML-címkéjéhez. Például:

Code language: HTML, XML (xml)

Események húzható elemeken

Egy elem húzásakor ezek az események a következő sorrendben aktiválódnak:

• dragstart
• drag
• dragend

Ha lenyomva tartja az egér gombját, és mozgatni kezdi az egeret, a dragstart esemény elindul a húzható elemen hogy húzod. A kurzor cseppentés nélküli szimbólummá (körvé, rajta egy vonallal) változik, jelezve, hogy nem dobhatja el az elemet önmagára.

A dragstart után esemény bekapcsol, a drag esemény többször is aktiválódik, amíg az elemet húzza.

És a dragend esemény elindul amikor abbahagyja az elem húzását.

Az összes esemény (e.target) célja az elem, amelyet húzunk.

Alapértelmezés szerint , a böngésző nem változtatja meg a húzott elem megjelenését. Ezért testreszabhatja a megjelenését a beállításai alapján.

Események a célpontokon

Amikor egy elemet egy érvényes drop célpont fölé húz, ezek az események a következő sorrendben aktiválódnak:

• dragenter
• dragover
• dragleave vagy drop

A dragenter esemény amint elindul amikor az elemet áthúzza egy csepp célpont fölé.

A dragenter esemény elindulása után a dragover esemény ismételten elindul. mindaddig, amíg az elemet a dobási cél határán belül húzza.

Amikor az elemet a dobási cél határain kívülre húzza, a dragover esemény leáll, és a dragleave esemény elindul.

Ha az elemet a célra dobja, akkor az drop esemény elindul a dragleave esemény helyett.

A cél ( ) a dragenter, dragover, dragleave és az drop események a csepp cél elemei.

Érvényes csepp cél

Szinte minden elem támogatja a csepp cél eseményeket (dragenter, dragover, dragleave és drop). Alapértelmezés szerint azonban nem engedélyezik az ejtést.

Ha olyan elemet dob le egy célpontra, amely nem engedi eldobni, az drop esemény nyert ne induljon el.

Ha egy elemet érvényes esési célzattá szeretne alakítani, felülírhatja a dragenter és a dragover eseményeket a event.preventDefault() módszer meghívásával a megfelelő eseménykezelőkben. (További információkért lásd a példa szakaszt.)

Adatok átvitele dataTransfer objektum használatával

Adatok áthelyezéséhez húzás művelettel használja a objektum.

A dataTransfer objektum az esemény tulajdonsága. Lehetővé teszi az adatok átvitelét a húzott elemről a drop célpontra.

A dataTransfer objektumnak két módja van: setData() és getData().

A setData() segítségével beállíthatja a húzási művelet adatait a megadott formátumra és adatokra :

Code language: CSS (css)

A formátum lehet text/plain vagy text/uri-list. Az adatok lehetnek karakterláncok is, amelyek az áthúzási objektumhoz hozzáadandó adatokat reprezentálják.

A getData() módszer lekéri a módszer.

A getData() egyetlen argumentumot elfogad:

A formátum lehet text/plain vagy text/uri-list. A getData() a setData() módszerrel tárolt karakterláncot vagy egy üres karakterláncot ad vissza, ha a húzási művelet nem tartalmaz adatokat.

JavaScript drag and drop példa

A következő egyszerű fogd és vidd alkalmazást fejlesztjük ki a JavaScript drag and drop API bemutatására:

Hozza létre a projekt felépítése

Először hozzon létre egy új mappát drag-n-drop-basics néven. Ebben a mappában hozzon létre két almappát css és js néven.

Másodszor hozzon létre egy új fájlt app.js a js mappában, style.css a css mappa, és index.html a drag-n-drop-basics mappában.

Harmadszor helyezze el a style.css és szkriptcímke, amely a app.js linkre hivatkozik a index.html fájlban:

Készítse el az index.html fájlt

Helyezze a következő kódot a index.html fájlba:

Ebben az index.html fájlban a .container elemet használtuk a címsor és a drop-targets elem igazításához.

A drop-target elem belsejében három div elemet helyezett el ugyanolyan osztályú box. És egy másik div elemet a item osztályba helyezünk az első mezőbe.

Ha megnyitja a index.html és próbálja meg húzni a sárga négyzetet, látni fogja a kurzort, amely jelzi, hogy nem lehet húzni:

Az elem húzhatóvá tételéhez adja hozzá a draggable tulajdonságot a true értékkel a HTML-címkéjére az alábbiak szerint:

Code language: JavaScript (javascript)

Ha elmenti a index.html fájlt, nyissa meg a böngészőben ismét látni fogja, hogy az elem elemét így húzhatja:

Kezelje az eseményeket a húzható elemen

A style.css fájl .hide osztály, amely elrejt egy elemet:

Code language: CSS (css)

A app.js fájlban a következő kódot adja hozzá:

Hogyan működik:

• Először válassza ki a húzható elemet a querySelector() segítségével.
• Másodszor csatoljon egy dragstart eseménykezelő a húzható elemhez.
• Harmadszor adja meg a dragStart() függvényt a dragstart esemény.

Ha megnyitja az index.html fájlt és elkezdi húzni a húzható elemet, a drag starts... üzenet jelenik meg a konzolt.

A dragStart eseménykezelőben tárolnia kell a húzható elem id -t. És el kell rejtenie:

Ha húzza az elemet, látni fogja, hogy eltűnik, ha elkezdte húzni.

Ennek megoldásához használja a setTimeout() függvény:

Mostantól kihúzhatja a húzható elemet az eredeti helyzetéből:

Események kezelése ejtési célokon

A style.css fájlnak van egy CSS osztálya is, amelynek neve: div div = “e61dc711bf”> , amely szaggatottá és pirosra változtatja a célpont szegélystílusát:

Code language: CSS (css)

Az app.js-ben szükséged van a drop elemek kiválasztásához és a dragenter, dragover, dragleave és drop ezeknek az eseményeknek az eseményei:

Meg kell változni a drop target célstílusának stílusát, amikor a dragenter és dragover esemény történik. Vissza kell állítania a stílust, amikor a dragleave és drop esemény bekövetkezik.

Ehhez hozzáad és eltávolít a drag-over osztályt a drop célhoz hasonlóan:

Most, ha a húzható elemet egy másik cseppre húzza cél, látni fogja, hogy a dobási cél határa a következő képen látható módon változik:

A leadási cél érvényességéhez a event.preventDefault() hívást kell megadni a dragenter és dragover eseménykezelők, mint ez:

Ha ezt nem teszi meg, akkor a drop esemény soha nem fog tűz, mert a div elem alapértelmezés szerint nem érvényes drop target.

Ha a húzható elemet egy drop célpontra húzza, akkor látni fogja, hogy a kurzor az elem elvetését jelző változtatások:

Most, ha eldobja az elem elemet, látni fogja, hogy azonnal eltűnik.

Ennek megoldására kérdés, hozzá kell adnia az drop esemény kezelését.

• Először kapja meg a húzható elem id -ét a getData() módszerrel a dataTransfer objektum.
• Másodszor csatolja a húzható elemet a drop drop elem gyermekelemeként.
• Harmadszor távolítsa el a hide osztály a draggable elemből.

A következő kód a teljes drop eseménykezelő:

Ha most áthúzza a húzható elemet, akkor a várt módon kell működnie.

Az alábbiakban bemutatjuk a teljes app.js fájlt:

És itt van a bemutató link.

Összegzés

• Adja hozzá a draggable tulajdonságot az true értékkel elemre, hogy az húzható legyen.
• A dragstart, drag és dragend események elindulnak a húzható elemen.
• A dragenter, dragover, vagy drop események tüzelnek a csepp célpontra.
• Hívja a event.preventDefault() dragenter és dragover eseménykezelőkkel egy elem érvényes cseppcélzattá válhat.
• Használja a event.dataTransfer objektum a setData() és getData() módszerrel az adatok áthelyezéséhez a fogd és vidd műveletben.