JavaScript è uno dei linguaggi di programmazione più popolari, potenziato da oltre 24 framework e circa 84 librerie. È l'unico linguaggio di programmazione supportato intrinsecamente da tutti i browser. Inoltre, il linguaggio supporta la tipizzazione dinamica ed è una scelta eccellente per il rendering e l'animazione. Puoi sfruttare JavaScript per aggiungere comportamenti interattivi nel front-end, controllare il back-end, creare applicazioni web e mobili e altro ancora. La possibilità di aggiungere effetti a qualsiasi sito web e renderlo personalizzabile rende questo linguaggio uno dei preferiti dai programmatori di tutto il mondo.
In questa guida, ti guideremo attraverso i passaggi per creare elementi drag and drop utilizzando puro Vanilla JavaScript. Inoltre, faremo un passo in avanti e creeremo un'app "Morning Scheduler" utilizzando i gestori di eventi dell'API Drag and Drop di HTML.
Prerequisiti
Per seguire questo tutorial, è necessario avere:
Passo 1: Creare un nuovo progetto
Inizia creando un contenitore con due elementi figli. Useremo il primo elemento figlio da trascinare e il secondo elemento figlio per memorizzare gli elementi trascinati.
|
Nota: In questo tutorial, tratteremo i contenitori como un archivio per conservare tutti gli elementi trascinati. In parole povere, tutti gli elementi trascinati dal primo figlio verranno rilasciati nel secondo figlio. |
|
1 |
$ mkdir drag-and-drop-demo |
Successivamente, usa il comando cd per cambiare la directory nella cartella drag-and-drop-demo :
|
1 |
$ cd drag-and-drop-demo |
Passo 2: Configurazione iniziale
In questo tutorial, creeremo i file HTML, CSS e JavaScript e li collegheremo. Per prima cosa, nomina i file come index.html, styles.css, e scripts.js rispettivamente.
Successivamente, aggiungi il titolo “My Morning Planner” nel file 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> |
Successivamente, collega il CSS e aggiungi JavaScript all'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> |
Successivamente, aggiungi le seguenti righe di codice nei tag <body>:
|
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>Il mio planner mattutino</title> </head> <body> <div class="container"> <h1><center>IL MIO PLANNER MATTUTINO</center></h1> <h2 class="draggable" draggable="true">Vai in palestra</h2> <h2 class="draggable" draggable="true">Leggi per 30 minuti</h2> <h2 class="draggable" draggable="true">Prepara la farina d'avena</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Fai una doccia fredda</h2> <h2 class="draggable" draggable="true">Inizia la giornata</h2> </div> </body> </html> |
Salva e chiudi il file index.html. Successivamente, prova ad aprire il file index.html nel tuo browser e vedrai aprirsi una pagina:
Successivamente, definiamo lo stile del nostro file index.html usando i CSS per renderlo presentabile.
Passo 3: Definizione dello stile tramite CSS
Successivamente, aggiungi gli stili a tutti gli elementi che abbiamo incluso nel nostro file index.html file:
|
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; } |
Prova ad aprire il file index.html nel tuo browser e guarda il risultato:
Anche se abbiamo completato la strutturazione e aggiunto gli stili, gli elementi sono ancora statici. Ciò significa che non possiamo spostare o scorrere gli elementi finché non aggiungiamo loro funzionalità dinamiche. Nel prossimo passo, daremo il benvenuto a JavaScript e ai comportamenti dinamici.
Passo 4: Introduzione a JavaScript
In questo passaggio, introdurremo JavaScript e renderemo funzionali tutti gli elementi di trascinamento. Nel file JS, imposta gli elementi di cui avremo bisogno. Definiamo draggable e containers rispettivamente per trascinare e rilasciare gli elementi.
Aggiungi le due righe di codice nel file scripts.js:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Successivamente, imposta tutti i listener di eventi. Inizia aggiungendo l'elemento “dragstart” come primo listener di eventi per aggiungere la lista delle classi. Allo stesso modo, aggiungi l'elemento “dragend” come secondo listener di eventi per rimuovere la lista delle classi.
Collega i seguenti EventListeners nel tuo file 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') }) }) |
Successivamente, aggiungi l' “dragover” EventListener per il passaggio del mouse e lo spostamento dei nostri elementi. Imposta l'elemento draggable corrente utilizzando querySelector e poi aggiungi l'elemento trascinabile al contenitore corrente:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Per impostazione predefinita, il rilascio all'interno di un elemento è disabilitato. Usa e.preventDefault per abilitarlo:
|
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) }) }) |
Successivamente, crea un elemento per determinare il posizionamento del mouse. Inizia creando una funzione getDragAfterElement che accetterà due parametri. Il primo sarà un container e il secondo parametro y si occuperà della posizione verticale del mouse. Ora, usa la funzione querySelectorAll per ottenere i nostri elementi trascinabili. Definisci un draggableElements per tutti gli elementi trascinabili all'interno del contenitore:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Successivamente, chiama una funzione reduce che eseguirà un ciclo attraverso l'elenco degli elementi trascinabili e specificherà anche il singolo elemento dopo il cursore del mouse. Successivamente, restituisci la funzione reduce aggiungendo il primo elemento come closest e il secondo come child. Inoltre, equipara l' offset e aggiungi le condizioni.
Aggiungi le seguenti righe di codice nel scripts.js file:
|
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 } |
Includi questo nel 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) } }) }) |
Ora abbiamo completato la configurazione necessaria. Apri il browser ed esegui index.html nel tuo browser. Vedrai la pagina “My Morning Scheduler” con opzioni di trascinamento della selezione. La linea bianca nel mezzo funge da ponte per differenziare le attività già completate da quelle ancora da svolgere:
Conclusione
Il Drag and Drop è un'ottima opzione da utilizzare nei siti web moderni. In questa guida abbiamo utilizzato una manciata di gestori di eventi per rendere il tutorial semplice per i principianti. Ci sono otto gestori di eventi in totale e ti incoraggiamo a usarli man mano che avanzi. Una volta che avrai preso confidenza con le funzioni e il codice utilizzati in questo tutorial, potrai approfondire argomenti JavaScript come jQuery e iniziare a esplorare. Puoi anche provare a creare un'app To-Do, un tracker dei progressi settimanali utilizzando le funzionalità di data e ora di JavaScript, e altre applicazioni utilizzando i concetti che hai appena appreso.
Per saperne di più su JavaScript e sullo sviluppo web, consulta queste risorse dal nostro blog:
- Strumenti JavaScript: localStorage e sessionStorage
- Lavorare con JavaScript: cosa sono gli oggetti
- Un tutorial su come lavorare con JSON in JavaScript
- Lavorare con JavaScript: come funzionano le classi
Buon computing!
Commenti
Ancora nessun commento. Scrivi il primo.