JavaScript je jedným z najpopulárnejších programovacích jazykov, ktorý disponuje viac ako 24 frameworkmi a približne 84 knižnicami. Je to jediný programovací jazyk, ktorý je natívne podporovaný všetkými prehliadačmi. Okrem toho tento jazyk podporuje dynamické typovanie a je vynikajúcou voľbou pre vykresľovanie a animácie. JavaScript môžete využiť na pridanie interaktívneho správania na front-ende, riadenie back-endu, vytváranie webových a mobilných aplikácií a mnoho ďalšieho. Možnosť pridať efekty na akúkoľvek webovú stránku a prispôsobiť ju robí z tohto jazyka obľúbený nástroj medzi vývojármi na celom svete.
V tejto príručke vás prevedieme krokmi vytvorenia prvkov typu drag and drop pomocou čistého Vanilla JavaScriptu. Okrem toho pôjdeme ešte o krok ďalej a vytvoríme aplikáciu „Morning Scheduler“ pomocou HTML Drag and Drop API handlerov udalostí.
Požiadavky
Ak chcete postupovať podľa tohto návodu, musíte mať:
Krok 1: Vytvorenie nového projektu
Začnite vytvorením kontajnera s dvoma dcérskymi prvkami. Prvý dcérsky prvok použijeme na ťahanie a druhý dcérsky prvok na ukladanie pretiahnutých prvkov.
|
Poznámka: V tomto návode budeme s kontajnermi zaobchádzať ako s úložiskom na uchovávanie všetkých pretiahnutých prvkov. Zjednodušene povedané, všetky prvky pretiahnuté z prvého dcérskeho prvku sa pustia do druhého dcérskeho prvku. |
|
1 |
$ mkdir drag-and-drop-demo |
Next, use the cd command to change the directory to the drag-and-drop-demo folder:
|
1 |
$ cd drag-and-drop-demo |
Step 2: Initial Set-up
In this tutorial, we will create HTML, CSS, and JavaScript files and connect them. First, name the files name as index.html, styles.css, and scripts.js files respectively.
Next, add the title as “My Morning Planner” in the index.html file:
|
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> |
Next, link CSS, and add JavaScript to HTML:
|
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> |
Ďalej pridajte nasledujúce riadky kódu do <body> tagov:
|
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="sk"> <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">Ísť do posilňovne</h2> <h2 class="draggable" draggable="true">Čítať 30 minút</h2> <h2 class="draggable" draggable="true">Pripraviť ovsenú kašu</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Dať si studenú sprchu</h2> <h2 class="draggable" draggable="true">Naštartovať môj deň</h2> </div> </body> </html> |
Uložte a zatvorte súbor index.html. Potom sa pokúste otvoriť súbor index.html vo vašom prehliadači a uvidíte, že sa otvorí stránka:
Ďalej upravme vzhľad nášho index.html pomocou CSS, aby vyzeral reprezentatívne.
Krok 3: Stylovanie pomocou CSS
Ďalej pridajte štýly pre všetky prvky, ktoré sme zahrnuli do nášho súboru index.html súboru:
|
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; } |
Skúste otvoriť súbor index.html vo vašom prehliadači a pozrite si výsledok:
Hoci sme dokončili štruktúru a pridali štýly, prvky sú stále statické. To znamená, že ich nemôžeme presúvať ani nimi hýbať, kým k nim nepridáme dynamické funkcie. V ďalšom kroku privítame JavaScript a dynamické správanie.
Krok 4: Predstavenie JavaScriptu
V tomto kroku si predstavíme JavaScript a sprevádzkujeme všetky prvky na ťahanie. V súbore JS nastavte prvky, ktoré budeme potrebovať. Definujme draggable a containers na ťahanie a pustenie prvkov.
Pridajte tieto dva riadky kódu do súboru scripts.js :
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Ďalej nastavte všetky poslucháče udalostí. Začnite pridaním prvku “dragstart” ako prvého poslucháča udalosti na add do zoznamu tried. Podobne pridajte prvok “dragend” ako druhého poslucháča udalosti na remove zo zoznamu tried.
Pripojte nasledujúce EventListeners vo vašom súbore scripts.js :
|
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') }) }) |
Ďalej pridajte “dragover” EventListener pre prechádzanie a presúvanie našich prvkov. Nastavte aktuálny draggable prvok pomocou querySelector a potom pripojte ťahateľný prvok k aktuálnemu kontajneru:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
V predvolenom nastavení je pustenie vnútri prvku zakázané. Použite e.preventDefault na jeho povolenie:
|
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) }) }) |
Ďalej vytvorte prvok na určenie pozície myši. Začnite vytvorením funkcie getDragAfterElement, ktorá bude prijímať dva parametre. Prvým bude container a druhý parameter y sa postará o vertikálnu pozíciu myši. Teraz použite funkciu querySelectorAll na získanie našich ťahateľných prvkov. Definujte draggableElements pre všetky ťahateľné prvky vo vnútri kontajnera:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Ďalej zavolajte funkciu reduce, ktorá prejde zoznam ťahateľných prvkov a tiež určí konkrétny prvok za kurzorom myši. Ďalej return funkciu reduce pridaním prvého prvku ako closest a druhého ako child. Taktiež porovnajte offset a pridajte podmienky.
Pridajte nasledujúce riadky kódu do scripts.js súboru:
|
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 } |
Include this in the scripts.js file:
|
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) } }) }) |
Now we have the necessary setup done. Open your browser and run index.html in your browser. You will see the page “My Morning Scheduler” with options to drag and drop. The white line in the middle acts as a bridge to differentiate between the tasks already done to the ones that are yet to be done:
Conclusion
Drag and Drop is an excellent option to use in modern-day websites. In this guide, we have used a handful of event handlers to make the tutorial easy for beginners. There are eight event handlers in total and we encourage you to use them as you advance. Once you’re comfortable using the functions and the code used in this tutorial, you can dive more into JavaScript topics like jQuery and start exploring. You can also try building a To-Do app, weekly progress tracker using JavaScript date and time features, and other applications using the concepts you have just learned.
To further learn more on JavaScript and web development topics, check these resources from our blog:
- JavaScript Tools: localStorage and sessionStorage
- Working with JavaScript: What are Objects
- Tutoriál o práci s JSON v JavaScripte
- Práca s JavaScriptom: Ako fungujú triedy
Príjemnú prácu s počítačom!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.