JavaScript je jedním z nejpopulárnějších programovacích jazyků, který disponuje více než 24 frameworky a přibližně 84 knihovnami. Je to jediný programovací jazyk, který je nativně podporován všemi prohlížeči. Kromě toho tento jazyk podporuje dynamické typování a skvěle se hodí pro vykreslování a animace. JavaScript můžete využít k přidání interaktivního chování na front-endu, řízení back-endu, vytváření webových a mobilních aplikací a k mnoha dalším účelům. Možnost přidávat efekty na jakýkoli web a přizpůsobovat jej činí z tohoto jazyka oblíbence mezi vývojáři po celém světě.
V tomto průvodci budeme vás provede kroky vytvoření prvků drag and drop pomocí čistého Vanilla JavaScriptu. Navíc postoupíme o krok dále a vytvoříme aplikaci „Morning Scheduler“ pomocí HTML Drag and Drop API obslužných rutin událostí.
Požadavky
Chcete-li sledovat tento návod, musíte mít:
Krok 1: Vytvořte nový projekt
Začněte vytvořením kontejneru se dvěma podřízenými prvky. První podřízený prvek použijeme k přetahování a druhý podřízený prvek k ukládání přetažených prvků.
|
Poznámka: V tomto návodu budeme kontejnery považovat za úložiště pro uchování všech přetažených prvků. Zjednodušeně řečeno, všechny prvky přetažené z prvního potomka budou vhozeny do druhého potomka. |
|
1 |
$ mkdir drag-and-drop-demo |
Dále použijte cd příkaz pro změnu adresáře na drag-and-drop-demo složku:
|
1 |
$ cd drag-and-drop-demo |
Krok 2: Počáteční nastavení
V tomto návodu vytvoříme soubory HTML, CSS a JavaScript a propojíme je. Nejprve pojmenujte soubory jako index.html, styles.css, a scripts.js v tomto pořadí.
Dále přidejte název jako “Můj ranní plánovač” v index.html souboru:
|
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>Můj ranní plánovač</title> </head> <body> </body> </html> |
Dále připojte CSS a přidejte JavaScript do HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="cs"> <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>Můj ranní plánovač</title> </head> <body> </body> </html> |
Dále přidejte následující řádky kódu do <body> značek:
|
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="cs"> <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>Můj ranní plánovač</title> </head> <body> <div class="container"> <h1><center>MŮJ RANNÍ PLÁNOVAČ</center></h1> <h2 class="draggable" draggable="true">Jít do posilovny</h2> <h2 class="draggable" draggable="true">Číst 30 minut</h2> <h2 class="draggable" draggable="true">Připravit ovesnou kaši</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Dát si studenou sprchu</h2> <h2 class="draggable" draggable="true">Začít můj den</h2> </div> </body> </html> |
Uložte a zavřete index.html soubor. Poté zkuste otevřít index.html soubor ve svém prohlížeči a uvidíte, jak se otevře stránka:
Dále nastylujeme náš index.html pomocí CSS, aby vypadal reprezentativně.
Krok 3: Stylování pomocí CSS
Dále přidejte styly ke všem prvkům, které jsme zahrnuli do našeho index.html souboru:
|
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; } |
Zkuste otevřít index.html soubor ve vašem prohlížeči a podívejte se na výstup:
Přestože jsme dokončili strukturování a přidali styly, prvky jsou stále statické. To znamená, že nemůžeme prvky přesouvat ani jimi rolovat, dokud k nim nepřidáme dynamické funkce. V dalším kroku přivítáme JavaScript a dynamické chování.
Krok 4: Představení JavaScriptu
V tomto kroku si představíme JavaScript a zprovozníme všechny přetahovatelné prvky. V JS souboru nastavte prvky, které budeme potřebovat. Definujme draggable a containers pro přetahování a pouštění prvků.
Přidejte tyto dva řádky kódu do scripts.js souboru:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Dále nastavte všechny posluchače událostí. Začněte přidáním “dragstart” prvku jako prvního posluchače události pro add do seznamu tříd. Podobně přidejte “dragend” prvku jako druhého posluchače události pro remove ze seznamu tříd.
Připojte následující EventListeners ve svém scripts.js souboru:
|
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') }) }) |
Dále přidejte “dragover” EventListener pro přejíždění a přesouvání našich prvků. Nastavte aktuální draggable prvek pomocí querySelector a poté připojte přetažitelný prvek k aktuálnímu kontejneru:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Ve výchozím nastavení je upuštění uvnitř prvku zakázáno. Použijte e.preventDefault pro jeho povolení:
|
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) }) }) |
Dále vytvořte prvek pro určení pozice myši. Začněte vytvořením funkce getDragAfterElement která bude přijímat dva parametry. Prvním bude container a druhý parametr y se postará o pozici myši na šířku. Nyní použijte querySelectorAll funkci k získání našich přetahovatelných prvků. Definujte draggableElements pro všechny přetahovatelné prvky uvnitř kontejneru:
|
1 2 3 4 |
// … funkce getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Dále zavolejte reduce funkci, která projde seznam přetahovatelných prvků a také určí konkrétní prvek za kurzorem myši. Dále return funkci reduce přidáním prvního prvku jako closest a druhý jako child. Také porovnejte offset a přidejte podmínky.
Přidejte následující řádky kódu do scripts.js souboru:
|
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 } |
Zahrňte to do scripts.js souboru:
|
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) } }) }) |
Nyní máme hotové potřebné nastavení. Otevřete prohlížeč a spusťte index.html ve svém prohlížeči. Uvidíte stránku „Můj ranní plánovač“ s možnostmi drag and drop. Bílá čára uprostřed funguje jako předěl pro rozlišení mezi úkoly, které jsou již hotové, a těmi, které je ještě třeba udělat:
Závěr
Drag and Drop je skvělá možnost pro použití na moderních webových stránkách. V tomto návodu jsme použili několik obsluh událostí, aby byl průvodce pro začátečníky snadný. Celkem existuje osm obsluh událostí a doporučujeme vám je používat, jak se budete zdokonalovat. Jakmile se s funkcemi a kódem použitým v tomto návodu sžijete, můžete se ponořit hlouběji do témat JavaScriptu, jako je jQuery a začít objevovat. Můžete si také zkusit vytvořit To-Do aplikaci, týdenní sledovač pokroku pomocí funkcí JavaScriptu pro datum a čas, a dalších aplikací využívajících koncepty, které jste se právě naučili.
Chcete-li se dozvědět více o JavaScriptu a tématech vývoje webu, podívejte se na tyto zdroje z našeho blogu:
- Nástroje JavaScriptu: localStorage a sessionStorage
- Práce s JavaScriptem: Co jsou objekty
- Návod na práci s JSON v JavaScriptu
- Práce s JavaScriptem: Jak fungují třídy
Příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.