Hogyan hozhat létre fogd és vidd elemeket Vanilla JavaScript és HTML használatával

Bevezetés

A húzás egy általános felhasználói interakció, amely számos grafikus felhasználói felületen megtalálható.

Korábban már léteznek JavaScript-könyvtárak a fogd és vidd funkció hozzáadásához alkalmazásához. Vannak azonban olyan helyzetek, amikor a könyvtár nem áll rendelkezésre, vagy olyan általános költséget vagy függőséget hoz létre, amelyre a projektjének nincs szüksége. Ezekben a helyzetekben a modern webböngészőkben az Ön számára elérhető API-k ismerete alternatív megoldásokat kínálhat.

A HTML Drag and Drop API a DOM eseménymodelljére támaszkodik, hogy információt szerezzen arról, hogy mi húzza vagy dobja el, és az elem frissítéséhez húzással. A JavaScript eseménykezelőkkel bármely elemet húzható elemgé vagy elemre alakíthat, amelybe bedobható elem lehet.

Ebben az oktatóanyagban egy húzó és vidd példát építünk a HTML fogd és vidd segítségével. API vanília JavaScript-sel az eseménykezelők használatához.

Előfeltételek

Az oktatóanyag kitöltéséhez a következőkre lesz szüksége:

• Egy modern webböngésző, amely támogatja a Fogd és vidd API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

1. lépés – A projekt és a kezdeti jelölés létrehozása

A projektünk egy konténerből áll, amely kétféle gyermekelemet tartalmaz:

• Gyerekelemek, amelyeket húzhat
• Gyermekelemek, amelyekbe elemek eshetnek bele

Először nyissa meg a terminálablakot, és hozzon létre egy új projektkönyvtárat:

Ezután lépjen az adott könyvtárba:

Ezután hozzon létre egy index.html fájlt abban a könyvtárban:

Ezután adjon hozzá kazánlap kódot egy HTML weboldalhoz:

És a címkék hozzáadják az draggable elemet és a dropzone (céldobó) indexet:

Mentse és zárja be a fájlt. Ezután hozzon létre egy style.css fájlt:

Ezután adjon stílusokat az elemekhez a index.html fájl:

Ez némi formázást ad az alkalmazáshoz. Most megtekintheti a index.html -t a böngészőben, és megfigyelheti, hogy ez draggable <div> és a dropzone <div>.

Ezután az első <div> -t kifejezetten húzhatóvá tesszük az draggable attribútum hozzáadásával:

Mentse és zárja be a fájlt.

Végül nézze meg újra a index.html -t a böngészőben. Ha rákattintunk az draggable <div> gombra, és áthúzzuk a képernyőn, vizuálisan jelezni kell, hogy mozog.

Az draggable attribútum alapértelmezett értéke auto. Ez azt jelenti, hogy az elem húzható-e, a böngésző alapértelmezett viselkedése határozza meg. Ez általában azt jelenti, hogy a szövegkiválasztások, képek és hivatkozások húzhatók a draggable="true" megadása nélkül.

Mostantól van egy HTML-fájl egy húzható elemmel. Folytatjuk a onevent kezelők hozzáadását.

2. Lépés – A fogd és vidd események kezelése JavaScript-sel

Jelenleg, ha engedje el az egeret, miközben húzza a húzható elemet, semmi sem történik. A DOM-elemek áthúzásával kapcsolatos műveletek elindításához a Drag and Drop API-t kell használnunk:

• ondragstart: Ez az eseménykezelő draggable elemünkhöz kapcsolódik, és bekapcsol, ha dragstart esemény történik.
• ondragover: Ez az eseménykezelő az dropzone elemhez lesz csatolva, és akkor aktiválódik, amikor egy dragover esemény bekövetkezik.
• ondrop: Ez az eseménykezelő az dropzone elemünkhöz és a tűzhöz is kapcsolódik, amikor egy drop esemény történik.

Megjegyzés: Összesen nyolc eseménykezelő van: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart és ondrop. Például nem lesz szükségük mindegyikre.

Először hivatkozzunk egy új https://www.digitalocean.com/community/tutorials/script.js fájlra a index.html:

Ezután hozzon létre egy új https://www.digitalocean.com/community/tutorials/script.js fájl:

A DataTransfer objektum nyomon követi az aktuális húzással kapcsolatos információkat. Elemünk drag and drop elemének frissítéséhez közvetlenül hozzáférnünk kell a DataTransfer objektumhoz.Ehhez kiválaszthatjuk a dataTransfer tulajdonságot a DOM elem DragEvent eleméből.

Megjegyzés: A DataTransfer objektum technikailag nyomon tudja követni az egyszerre több elem húzásával kapcsolatos információkat. Példánkban egy elem húzására összpontosítunk.

A dataTransfer objektum setData metódusa használható az aktuálisan elhúzott elem húzási állapotára vonatkozó információk beállításához. Két paraméterre van szükség:

• egy karakterlánc, amely deklarálja a második paraméter formátumát
• az átvitt tényleges adatokat

Célunk az draggable elem áthelyezése egy új szülő elemre. Képesnek kell lennünk kiválasztani az draggable elemünket egyedi id elemekkel. Beállíthatjuk a húzott elem id -ét a setData módszerrel, hogy később felhasználható legyen.

Nézzük látogassa meg újra a https://www.digitalocean.com/community/tutorials/script.js fájlt, és hozzon létre egy új függvényt a setData használatához:

Megjegyzés: Az Internet Explorer 9–11 állítólag problémái vannak a "text/plain" használatával. A formátumnak "text" kell lennie ahhoz a böngészőhöz.

A húzott elem CSS stílusának frissítéséhez a DOM esemény használatával és a tetszőleges stílusok beállítása a currentTarget számára.

Vegyük fel a függvényünket és változtassuk a backgroundColor értéket yellow:

Megjegyzés: Minden módosított stílust manuálisan kell frissíteni on drop, ha csak húzható stílusokat szeretne. Ha bármit megváltoztat, amikor elkezd húzni, akkor a húzott elem megtartja az új stílust, hacsak nem változtatja vissza.

Mostantól megvan a JavaScript funkciónk, amikor a húzás elindul. p> Hozzáadhatjuk a ondragstart elemet az draggable elemhez a index.html:

A index.html megtekintése a böngészőben. Ha most megpróbálja húzni az elemét, akkor a funkciónkban megadott stílus lesz alkalmazva:

Azonban semmi sem fog történni amikor elengedi a kattintását.

A következő eseménykezelő, amelyet ebben a sorrendben indítottak el, ondragover.

Bizonyos DOM elemek alapértelmezett esési viselkedése mint például a böngészőkben található <div> s, általában nem fogadja el az ejtést. Ez a viselkedés elfogja azt a viselkedést, amelyet megpróbálunk megvalósítani. A kívánt eldobási viselkedés biztosítása érdekében a preventDefault alkalmazást fogjuk alkalmazni.

Nézzük át a https://www.digitalocean.com/community/tutorials/script.js fájlt, és hozzon létre egy új függvényt a preventDefault használatához. Adja hozzá ezt a kódot a fájl végéhez:

Most, hozzáadhatjuk a ondragover elemet a dropzone elemhez a index.html:

Ezen a ponton még mindig nem írtunk kódot a tényleges leesés kezelésére. Az ebben a sorrendben kilőtt utolsó eseménykezelő a következő: ondrop.

Látogassuk el újra a https://www.digitalocean.com/community/tutorials/script.js fájlt, és hozzunk létre egy új függvényt .

A korábban elmentett adatokra hivatkozhatunk az dataTransfer objektum setData módszerével. A dataTransfer objektum getData módszerét fogjuk használni. Az általunk beállított adatok a id voltak, tehát ezt kapjuk vissza:

Válassza ki az draggable elemünket a id segítségével:

Válassza ki a dropzone elem:

A draggable elem a dropzone elemhez:

dataTransfer objektum visszaállítása:

Most hozzáadhatunk ondrop -t a dropzone elemhez a index.html:

Miután ez megtörtént, elkészült a fogd és vidd funkció. Nézze meg a index.html böngészőben, és húzza az draggable elemet a dropzone.

Példánk egyetlen húzható elem és egyetlen csepp célpont forgatókönyvét kezeli. Rendelhet több húzható elemet, több eldobási célt, és testre szabhatja az összes többi Drag and Drop API eseménykezelővel.

3. lépés – Haladó példa készítése több húzható tétellel

Íme még egy példa arra, hogyan használhatja ezt az API-t: tennivalók listája húzható feladatokkal, amelyekről áthelyezhető egy "To-do" oszlopot egy "Done" oszlopba.

Saját teendőlista létrehozásához adjon hozzá további húzható elemeket egyedi id s – index.html:

A index.html megtekintése böngészőt, és húzza a Teendők oszlopban lévő elemeket a Kész oszlopba. Létrehozott egy tennivaló alkalmazást és tesztelte a funkcionalitást.

Következtetés

Ebben a cikkben létrehozott tennivaló alkalmazást a fogd és vidd funkciók feltárására. elérhető a modern webböngészők számára.

A Drag and Drop API több lehetőséget kínál a műveletek testreszabására a húzáson túl. Frissítheti például a húzott elemek CSS-stílusát. Az elem áthelyezése helyett választhatja azt is, hogy másolja-e a húzható elemet, hogy az replikáláskor replikálódjon.

Ne feledje, hogy bár sok webböngésző támogatja ezt a technológiát, előfordulhat, hogy nem tud megbízni benne. rajta, ha a közönség olyan eszközökből áll, amelyek nem támogatják ezt a funkciót.

Ha többet szeretne megtudni a Drag and Drop API-val dobható összes eszközről, nézze meg az MDN dokumentumait.