JavaScript is een van de meest populaire programmeertalen, versterkt met meer dan 24 frameworks en ongeveer 84 bibliotheken. Het is de enige programmeertaal die intrinsiek door alle browsers wordt ondersteund. Daarnaast ondersteunt de taal dynamische typering en is het uitermate geschikt voor rendering en animatie. Je kunt JavaScript gebruiken om interactief gedrag aan de front-end toe te voegen, de back-end te besturen, web- en mobiele applicaties te maken en meer. De mogelijkheid om effecten aan elke website toe te voegen en deze aanpasbaar te maken, maakt de taal een favoriet onder ontwikkelaars wereldwijd.
In deze gids zullen we je door de stappen leiden voor het maken van drag-and-drop-elementen met behulp van pure Vanilla JavaScript. Daarnaast gaan we nog een stap verder en bouwen we een 'Morning Scheduler'-app met behulp van de HTML Drag and Drop API event handlers.
Vereisten
Om deze handleiding te kunnen volgen, moet je beschikken over:
Stap 1: Maak een nieuw project
Begin met het maken van een container met twee subelementen. We gebruiken het eerste subelement om te slepen en het tweede subelement om de gesleepte elementen in op te slaan.
|
Opmerking: In deze handleiding beschouwen we containers als een opslagplaats om alle gesleepte elementen te bewaren. Simpel gezegd worden alle elementen die vanuit het eerste subelement worden gesleept, in het tweede subelement neergezet. |
|
1 |
$ mkdir drag-and-drop-demo |
Gebruik vervolgens het cd-commando om de map te wijzigen naar de drag-and-drop-demo -map:
|
1 |
$ cd drag-and-drop-demo |
Stap 2: Initiële configuratie
In deze handleiding maken we HTML-, CSS- en JavaScript-bestanden en verbinden we deze. Geef de bestanden respectievelijk de namen index.html, styles.css, en scripts.js bestanden.
Voeg vervolgens de titel toe als “My Morning Planner” in het index.html -bestand:
|
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> |
Koppel vervolgens CSS en voeg JavaScript toe aan 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> |
Voeg vervolgens de volgende regels code toe in de <body> tags:
|
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>Mijn ochtendplanner</title> </head> <body> <div class="container"> <h1><center>MIJN OCHTENDPLANNER</center></h1> <h2 class="draggable" draggable="true">Naar de sportschool gaan</h2> <h2 class="draggable" draggable="true">30 minuten lezen</h2> <h2 class="draggable" draggable="true">Havermout bereiden</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Een koude douche nemen</h2> <h2 class="draggable" draggable="true">Mijn dag beginnen</h2> </div> </body> </html> |
Sla het index.html-bestand op en sluit het. Probeer daarna het index.html-bestand te openen in je browser en je zult zien dat er een pagina wordt geopend:
Laten we vervolgens onze index.html stylen met CSS om het er toonbaar uit te laten zien.
Stap 3: Stylen met CSS
Voeg vervolgens stijlen toe aan alle elementen die we hebben opgenomen in ons index.html-bestand:
|
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; } |
Probeer het index.html-bestand te openen in je browser en bekijk het resultaat:
Hoewel we de structuur hebben voltooid en stijlen hebben toegevoegd, zijn de elementen nog steeds statisch. Dat betekent dat we elementen niet kunnen verplaatsen of scrollen totdat we er dynamische functies aan toevoegen. In de volgende stap introduceren we JavaScript en dynamisch gedrag.
Stap 4: Introductie van JavaScript
In deze stap introduceren we JavaScript en maken we alle versleepbare elementen functioneel. Stel in het JS-bestand de elementen in die we nodig hebben. Laten we draggable en containers definiëren om respectievelijk elementen te slepen en neer te zetten.
Voeg de twee regels code toe aan het scripts.js-bestand:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Stel vervolgens alle event listeners in. Begin met het toevoegen van het “dragstart”-element als de eerste event listener om add toe te voegen aan de klassenlijst. Voeg op dezelfde manier het “dragend”-element toe als de tweede event listener om remove te gebruiken om de klasse te verwijderen.
Koppel de volgende EventListeners in je scripts.js-bestand:
|
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') }) }) |
Voeg vervolgens de “dragover” EventListener toe voor het zweven en verplaatsen van onze elementen. Stel het huidige draggable-element in met behulp van de querySelector en voeg vervolgens het versleepbare element toe aan de huidige container:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Standaard is het neerzetten binnen een element uitgeschakeld. Gebruik e.preventDefault om dit in te schakelen:
|
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) }) }) |
Maak vervolgens een element om de muispositie te bepalen. Begin met het maken van een functie getDragAfterElement die twee parameters accepteert. De eerste is een container en de tweede parameter y regelt de verticale positie van de muis. Gebruik nu de querySelectorAll-functie om onze versleepbare elementen op te halen. Definieer een draggableElements voor alle versleepbare elementen binnen de container:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Roep vervolgens een reduce-functie aan die door de lijst met versleepbare elementen loopt en ook het specifieke element na de muiscursor bepaalt. Vervolgens return return je de reduce-functie door het eerste element toe te voegen als closest en het tweede als een child. Stel ook de offset gelijk en voeg voorwaarden toe.
Voeg de volgende regels code toe in het scripts.js-bestand:
|
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 } |
Neem dit op in het scripts.js-bestand:
|
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) } }) }) |
Nu hebben we de benodigde configuratie voltooid. Open je browser en voer index.html uit in je browser. Je ziet de pagina “My Morning Scheduler” met opties om te slepen en neer te zetten. De witte lijn in het midden fungeert als een brug om onderscheid te maken tussen de taken die al zijn gedaan en de taken die nog moeten worden gedaan:
Conclusie
Slepen en neerzetten is een uitstekende optie om te gebruiken in moderne websites. In deze handleiding hebben we een handvol event handlers gebruikt om de tutorial eenvoudig te maken voor beginners. Er zijn in totaal acht event handlers en we moedigen je aan om ze te gebruiken naarmate je vordert. Zodra je vertrouwd bent met het gebruik van de functies en de code die in deze handleiding worden gebruikt, kun je je verder verdiepen in JavaScript-onderwerpen zoals jQuery en beginnen met ontdekken. Je kunt ook proberen een To-Do-app of een wekelijkse voortgangstracker te bouwen met behulp van JavaScript datum- en tijdfuncties, en andere toepassingen met behulp van de concepten die je zojuist hebt geleerd.
Om meer te leren over JavaScript en webontwikkeling, kun je deze bronnen bekijken van onze blog:
- JavaScript-tools: localStorage en sessionStorage
- Werken met JavaScript: Wat zijn objecten
- Een handleiding over het werken met JSON in JavaScript
- Werken met JavaScript: hoe klassen werken
Veel computerplezier!
Reacties
Nog geen reacties. Wees de eerste.