JavaScript az egyik legnépszerűbb programozási nyelv, amelyet több mint 24 keretrendszer és körülbelül 84 könyvtár támogat. Ez az egyetlen programozási nyelv, amelyet minden böngésző natívan támogat. Emellett a nyelv támogatja a dinamikus típusosságot, és kiválóan alkalmas renderelésre és animációra. A JavaScript segítségével interaktív viselkedést adhat hozzá a frontendhez, vezérelheti a backendet, webes és mobilalkalmazásokat hozhat létre, és még sok mást is tehet. Az a lehetőség, hogy bármely weboldalhoz effektusokat adhatunk és testreszabhatóvá tehetjük, a fejlesztők kedvencévé teszi ezt a nyelvet világszerte.
Ebben az útmutatóban végigvezetjük a drag and drop elemek létrehozásának lépésein tiszta Vanilla JavaScript használatával. Ezenkívül egy lépéssel tovább megyünk, és elkészítünk egy „Morning Scheduler” alkalmazást a HTML Drag and Drop API eseménykezelőinek használatával.
Előfeltételek
A tutorial követéséhez a következőkre van szüksége:
1. lépés: Új projekt létrehozása
Kezdje egy olyan konténer létrehozásával, amely két gyermekelemet tartalmaz. Az első gyermekelemet a húzáshoz, a másodikat pedig a behúzott elemek tárolására fogjuk használni.
|
Megjegyzés: Ebben a tutorialban a konténereket tárolóként fogjuk kezelni az összes behúzott elem megtartásához. Egyszerűen fogalmazva, az első gyermekelemből áthúzott összes elem a második gyermekelembe kerül. |
|
1 |
$ mkdir drag-and-drop-demo |
Ezután használja a cd parancsot a könyvtár módosításához a drag-and-drop-demo mappára:
|
1 |
$ cd drag-and-drop-demo |
2. lépés: Kezdeti beállítások
Ebben a tutorialban HTML-, CSS- és JavaScript-fájlokat fogunk létrehozni és összekapcsolni őket. Először nevezze el a fájlokat rendre index.html, styles.css, illetve scripts.js fájloknak.
Ezután adja hozzá a címet “My Morning Planner” formájában az index.html fájlban:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Morning Planner</title> </head> <body> </body> </html> |
Ezután linkelje a CSS-t, és adja hozzá a JavaScriptet a HTML-hez:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>My Morning Planner</title> </head> <body> </body> </html> |
Ezután adja hozzá a következő kódsorokat a <body> tagek közé:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Reggeli tervezőm</title> </head> <body> <div class="container"> <h1><center>REGGELI TERVEZŐM</center></h1> <h2 class="draggable" draggable="true">Menj edzőterembe</h2> <h2 class="draggable" draggable="true">Olvass 30 percet</h2> <h2 class="draggable" draggable="true">Készíts zabkását</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Zuhanyozz le hideg vízzel</h2> <h2 class="draggable" draggable="true">Indítsd el a napom</h2> </div> </body> </html> |
Mentse el és zárja be az index.html fájlt. Ezután próbálja meg megnyitni az index.html fájlt a böngészőjében, és látni fogja, hogy megnyílik egy oldal:
Ezután formázzuk meg az index.html fájlt CSS segítségével, hogy jól nézzen ki.
3. lépés: Formázás CSS segítségével
Ezután adjon stílusokat az összes olyan elemhez, amelyet az index.html fájlunkba foglaltunk:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
Próbálja meg megnyitni az index.html fájlt a böngészőjében, és nézze meg az eredményt:
Bár befejeztük a strukturálást és hozzáadtuk a stílusokat, az elemek még mindig statikusak. Ez azt jelenti, hogy nem tudjuk mozgatni vagy görgetni az elemeket, amíg nem adunk hozzájuk dinamikus funkciókat. A következő lépésben bevezetjük a JavaScriptet és a dinamikus viselkedést.
4. lépés: A JavaScript bevezetése
Ebben a lépésben bevezetjük a JavaScriptet, és működővé tesszük az összes vonszolható elemet. A JS fájlban határozzuk meg a szükséges elemeket. Definiáljuk a draggable és containers elemeket az elemek vonszolásához és ejtéséhez.
Add hozzá ezt a két sor kódot a scripts.js fájlhoz:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Ezután állítsd be az összes eseményfigyelőt. Kezdd azzal, hogy hozzáadod a “dragstart” elemet első eseményfigyelőként, hogy add az osztálylistát. Hasonlóképpen, add hozzá a “dragend” elemet második eseményfigyelőként, hogy remove az osztálylistát.
Csatold a következő EventListeners elemeket a scripts.js fájlodban:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
Ezután add hozzá a “dragover” EventListener eseményfigyelőt az elemek feletti lebegtetéshez és mozgatáshoz. Állítsd be az aktuális draggable elemet a querySelector segítségével, majd fűzd hozzá a vonszolható elemet az aktuális konténerhez:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Alapértelmezés szerint az elemen belüli ejtés le van tiltva. Használd az e.preventDefault metódust az engedélyezéséhez:
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
Ezután hozz létre egy elemet az egér pozíciójának meghatározásához. Kezdd egy getDragAfterElement függvény létrehozásával, amely két paramétert fogad. Az első egy container lesz, a második paraméter, az y pedig az egér függőleges pozíciójáért felel. Most használd a querySelectorAll függvényt a vonszolható elemek lekéréséhez. Definiálj egy draggableElements változót a konténerben lévő összes vonszolható elemhez:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Ezután hívj meg egy reduce függvényt, amely végigmegy a vonszolható elemek listáján, és meghatározza az egérkurzor utáni egyetlen elemet. Ezután return a reduce függvényből, hozzáadva az első elemet mint closest és a másodikat mint child. Emellett számítsd ki az offset értékét, és adj hozzá feltételeket.
Adja hozzá a következő kódsorokat a scripts.js fájlba:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
Illessze be ezt a scripts.js fájlba:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
Most már elvégeztük a szükséges beállításokat. Nyissa meg a böngészőjét, és futtassa az index.html fájlt a böngészőjében. Látni fogja a „My Morning Scheduler” oldalt a fogd és vidd lehetőségekkel. A középen lévő fehér vonal hídként szolgál a már elvégzett és a még elvégzendő feladatok megkülönböztetésére:
Összegzés
A fogd és vidd (Drag and Drop) funkció kiváló lehetőség a modern weboldalakon. Ebben az útmutatóban néhány eseménykezelőt használtunk, hogy a bemutató könnyen érthető legyen a kezdők számára. Összesen nyolc eseménykezelő létezik, és arra bátorítjuk, hogy használja őket a fejlődése során. Ha már magabiztosan használja az ebben az útmutatóban szereplő függvényeket és kódokat, elmerülhet az olyan JavaScript témakörökben, mint a jQuery, és elkezdheti a felfedezést. Megpróbálhat létrehozni egy To-Do (teendő) alkalmazást, egy heti haladási naplót a JavaScript dátum- és időfunkciók segítségével, vagy más alkalmazásokat az imént tanult koncepciók alapján.
Ha szeretne többet megtudni a JavaScriptről és a webfejlesztési témákról, tekintse meg ezeket a forrásokat a blogunkról:
- JavaScript eszközök: localStorage és sessionStorage
- Munkavégzés JavaScripttel: Mik azok az objektumok
- Útmutató a JSON használatához JavaScriptben
- JavaScript használata: Hogyan működnek az osztályok
Kellemes számítógépezést!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.