JavaScript je jedan od najpopularnijih programskih jezika, osnažen s više od 24 radna okvira i oko 84 biblioteke. To je jedini programski jezik koji svi preglednici izvorno podržavaju. Osim toga, ovaj jezik podržava dinamičko tipkanje i izvrstan je izbor za renderiranje i animaciju. Možete iskoristiti JavaScript za dodavanje interaktivnog ponašanja na sučelju (front-end), upravljanje pozadinom (back-end), stvaranje web i mobilnih aplikacija i još mnogo toga. Mogućnost dodavanja efekata bilo kojoj web-stranici i njezina prilagodba čini ovaj jezik omiljenim među razvojnim programerima diljem svijeta.
U ovom vodiču ćemo vas provesti kroz korake stvaranja elemenata za povlačenje i ispuštanje (drag and drop) koristeći čisti Vanilla JavaScript. Osim toga, napravit ćemo korak dalje i izgraditi aplikaciju „Morning Scheduler” koristeći HTML Drag and Drop API rukovatelje događajima.
Preduvjeti
Kako biste pratili ovaj vodič, morate imati:
Korak 1: Stvorite novi projekt
Započnite stvaranjem spremnika s dva podređena elementa. Prvi podređeni element koristit ćemo za povlačenje, a drugi podređeni element za pohranu povučenih elemenata.
|
Napomena: U ovom vodiču spremnike ćemo tretirati kao skladište za čuvanje svih povučenih elemenata. Jednostavno rečeno, svi elementi povučeni iz prvog podređenog elementa bit će ispušteni u drugi podređeni element. |
|
1 |
$ mkdir drag-and-drop-demo |
Zatim upotrijebite cd naredbu za promjenu direktorija u mapu drag-and-drop-demo mapu:
|
1 |
$ cd drag-and-drop-demo |
Korak 2: Početno postavljanje
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.
Zatim dodajte naslov “My Morning Planner” u datoteku index.html :
|
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> |
Zatim povežite CSS i dodajte JavaScript u 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> |
Zatim dodajte sljedeće retke koda u <body> oznake:
|
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>Moj jutarnji planer</title> </head> <body> <div class="container"> <h1><center>MOJ JUTARNJI PLANER</center></h1> <h2 class="draggable" draggable="true">Idi u teretanu</h2> <h2 class="draggable" draggable="true">Čitaj 30 minuta</h2> <h2 class="draggable" draggable="true">Pripremi zobenu kašu</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Otuširaj se hladnom vodom</h2> <h2 class="draggable" draggable="true">Započni svoj dan</h2> </div> </body> </html> |
Spremite i zatvorite index.html datoteku. Nakon toga pokušajte otvoriti index.html datoteku u svom pregledniku i vidjet ćete kako se otvara stranica:
Zatim stilizirajmo našu index.html pomoću CSS-a kako bi izgledala prezentabilno.
Korak 3: Stiliziranje pomoću CSS-a
Zatim dodajte stilove na sve elemente koje smo uključili u našu index.html datoteku:
|
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; } |
Pokušajte otvoriti index.html datoteku u svom pregledniku i pogledajte rezultat:
Iako smo dovršili strukturiranje i dodali stilove, elementi su i dalje statični. To znači da ne možemo pomicati niti skrolati elemente dok im ne dodamo dinamičke značajke. U sljedećem koraku uvest ćemo JavaScript i dinamičko ponašanje.
Korak 4: Predstavljanje JavaScripta
U ovom koraku uvest ćemo JavaScript i učiniti sve elemente za povlačenje funkcionalnima. U JS datoteci postavite elemente koji će nam trebati. Definirajmo draggable i containers za povlačenje i ispuštanje elemenata.
Dodajte dva retka koda u scripts.js datoteku:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Zatim postavite sve slušatelje događaja. Započnite s dodavanjem “dragstart” elementa kao prvog slušatelja događaja za add popis klasa. Slično tome, dodajte “dragend” element kao drugog slušatelja događaja za remove popis klasa.
Priložite sljedeće EventListeners u svoju scripts.js datoteku:
|
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') }) }) |
Zatim dodajte “dragover” EventListener za lebdenje i pomicanje naših elemenata uokolo. Postavite trenutni draggable element pomoću querySelector a zatim dodajte povlačivi element u trenutni spremnik:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Prema zadanim postavkama, ispuštanje unutar elementa je onemogućeno. Koristite e.preventDefault kako biste ga omogućili:
|
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) }) }) |
Zatim stvorite element za određivanje položaja miša. Započnite stvaranjem funkcije getDragAfterElement koja će primati dva parametra. Prvi će biti container a drugi parametar y će se brinuti za vertikalni položaj miša. Sada upotrijebite funkciju querySelectorAll kako biste dobili naše povlačive elemente. Definirajte draggableElements za sve povlačive elemente unutar spremnika:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Zatim pozovite reduce funkciju koja će prolaziti kroz popis povlačivih elemenata i također odrediti pojedinačni element nakon pokazivača miša. Zatim, vratite funkciju reduce dodavanjem prvog elementa kao closest a drugog kao child. Također, izjednačite offset i dodajte uvjete.
Dodajte sljedeće linije koda u scripts.js datoteku:
|
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 } |
Uključite ovo u scripts.js datoteku:
|
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) } }) }) |
Sada imamo dovršeno potrebno postavljanje. Otvorite svoj preglednik i pokrenite index.html u svom pregledniku. Vidjet ćete stranicu “My Morning Scheduler” s opcijama za povlačenje i ispuštanje. Bijela linija u sredini služi kao most za razlikovanje zadataka koji su već obavljeni od onih koje tek treba obaviti:
Zaključak
Povlačenje i ispuštanje izvrsna je opcija za korištenje na modernim web stranicama. U ovom smo vodiču koristili nekoliko rukovatelja događajima kako bismo tutorial učinili jednostavnim za početnike. Ukupno postoji osam rukovatelja događajima i potičemo vas da ih koristite kako napredujete. Kada se osjećate ugodno koristeći funkcije i kod korišten u ovom vodiču, možete dublje zaroniti u JavaScript teme poput jQuery i početi istraživati. Također možete pokušati izraditi To-Do aplikaciju, tjedni praćenje napretka koristeći JavaScript značajke datuma i vremena, i druge aplikacije koristeći koncepte koje ste upravo naučili.
Kako biste saznali više o JavaScriptu i temama razvoja weba, pogledajte ove resurse s našeg bloga:
- JavaScript alati: localStorage i sessionStorage
- Rad s JavaScriptom: Što su objekti
- Vodič za rad s JSON-om u JavaScriptu
- Rad s JavaScriptom: kako funkcioniraju klase
Sretno programiranje!
Komentari
Još nema komentara. Budite prvi.