Drag and Drop in JavaScript: 3 Snippet Pronti per Liste, Immagini e File

Il drag and drop (tradotto letteralmente “trascina e rilascia”) è una funzionalità che rende l’interfaccia di un sito web più interattiva e immediata. Immagina di poter ordinare una to-do list semplicemente trascinando le voci, o di creare una galleria di immagini in cui l’utente può riorganizzare le foto con pochi gesti. In più, il file drag and drop offre un modo intuitivo per caricare documenti e immagini sul sito, senza dover cliccare su un pulsante di upload.

Questa tecnologia è supportata dalle API HTML5, che ci mettono a disposizione eventi specifici come dragstart, dragover, drop e molti altri. Tutto ciò permette di intercettare i movimenti del mouse (o del cursore) e dare all’utente una sensazione di controllo totale sul contenuto.

Perché Implementare il Drag and Drop?

• Esperienza utente potenziata: Trascinando elementi HTML l’utente ha la percezione di interagire con oggetti “fisici” sullo schermo, il che aumenta l’engagement.
• Organizzazione intuitiva: Che si tratti di liste, immagini o file, l’ordinamento con drag and drop è più naturale e richiede meno passaggi rispetto a pulsanti o menù a tendina.
• Flessibilità: L’API nativa di HTML5 offre un buon controllo sugli eventi. Se poi ti serve qualcosa di più avanzato, puoi integrare facilmente librerie esterne.
• Front-end moderno: Molti tool e applicazioni web popolari (come Trello o i sistemi di e-mail marketing) si basano sul concetto di trascina e rilascia per migliorare l’usabilità.

Di seguito, trovi 3 snippet di codice pronti da copiare e incollare, scritti in JavaScript puro e accompagnati da esempi di markup HTML. Potrai personalizzarli in pochi passi per integrarli nel tuo progetto.

1. Ordinamento di Liste con Drag and Drop

Un caso d’uso classico è l’ordinamento di elementi in una lista, come in una to-do list o in un mini-Kanban. Sarà sufficiente aggiungere l’attributo draggable="true" sugli elementi e gestire alcuni eventi.

HTML

<ul id="myList">
  <li draggable="true">Task 1</li>
  <li draggable="true">Task 2</li>
  <li draggable="true">Task 3</li>
  <li draggable="true">Task 4</li>
</ul>

• Ogni <li> che vogliamo trascinare deve avere draggable="true".

JavaScript

const listItems = document.querySelectorAll('#myList li');
let draggedItem = null;

listItems.forEach((item) => {
  // Inizio del trascinamento
  item.addEventListener('dragstart', (e) => {
    draggedItem = item;
    // Impostiamo alcuni dati di trasferimento, anche vuoti, per abilitare il drag
    e.dataTransfer.setData('text/plain', '');
  });

  // Consentire il drop disabilitando l'evento di default
  item.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  // Quando l’elemento viene rilasciato
  item.addEventListener('drop', (e) => {
    e.preventDefault();
    if (draggedItem !== item) {
      const list = item.parentNode;
      // Inserisce l’elemento trascinato prima di quello su cui si è fatto il drop
      list.insertBefore(draggedItem, item);
    }
  });
});

Come funziona, passo per passo:

1. dragstart: Salviamo in draggedItem l’elemento che stiamo trascinando.
2. dragover: Impediamo l’azione predefinita del browser (altrimenti non è possibile rilasciare l’elemento).
3. drop: Se l’elemento trascinato è diverso dall’elemento su cui lo si rilascia, eseguiamo lo spostamento vero e proprio con insertBefore.

Questa tecnica è molto utile in contesti dove l’ordinamento degli elementi è frequente, ad esempio per una check-list di attività o per un elenco di priorità.

2. Trascinare e Rilasciare Immagini in una Galleria

Se desideri creare una galleria di immagini più dinamica, puoi consentire agli utenti di cambiare l’ordine delle foto con un semplice drag and drop. È la stessa logica del primo snippet, ma applicata ai tag <img>.

HTML

<div id="gallery">
  <img src="immagine1.jpg" alt="Immagine 1" draggable="true" />
  <img src="immagine2.jpg" alt="Immagine 2" draggable="true" />
  <img src="immagine3.jpg" alt="Immagine 3" draggable="true" />
</div>

JavaScript

const images = document.querySelectorAll('#gallery img');
let draggedImg = null;

images.forEach((img) => {
  // Inizio trascinamento
  img.addEventListener('dragstart', (e) => {
    draggedImg = img;
    e.dataTransfer.setData('text/plain', '');
  });

  // Permettiamo il drop sopra altre immagini
  img.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  // Rilascio dell'immagine
  img.addEventListener('drop', (e) => {
    e.preventDefault();
    if (draggedImg !== img) {
      const gallery = img.parentNode;
      // Inserisce l’immagine trascinata prima di quella su cui si è fatto il drop
      gallery.insertBefore(draggedImg, img);
    }
  });
});

Vantaggi:

• L’ordine delle immagini può essere memorizzato (es. in un database) per creare gallerie personalizzate.
• Con qualche riga di CSS in più, puoi aggiungere effetti visivi durante il trascinamento (per esempio, evidenziare l’immagine di destinazione).

3. Drag & Drop per Caricare File Localmente

Il file drag and drop è una funzionalità molto apprezzata perché evita di dover cliccare su un pulsante “Scegli file” e navigare tra le cartelle. Con HTML5 e JavaScript, puoi creare un’area di drop dedicata.

HTML

<div id="dropZone">Trascina qui il tuo file</div>
<div id="preview"></div>

CSS (facoltativo, ma consigliato)

#dropZone {
  width: 300px;
  height: 100px;
  border: 2px dashed #ccc;
  text-align: center;
  line-height: 100px;
  margin-bottom: 20px;
}
#dropZone.drag-over {
  border-color: #000;
}
#preview img {
  max-width: 100px;
  margin: 10px;
}

• La classe drag-over viene aggiunta o rimossa in base agli eventi di drag, per evidenziare l’area in cui si sta per rilasciare il file.

JavaScript

const dropZone = document.getElementById('dropZone');
const preview = document.getElementById('preview');

// Evitiamo il comportamento predefinito su diversi eventi
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropZone.addEventListener(eventName, (e) => e.preventDefault());
});

// Aggiungiamo una classe quando il cursore con file è sopra la drop zone
['dragenter', 'dragover'].forEach(eventName => {
  dropZone.addEventListener(eventName, () => {
    dropZone.classList.add('drag-over');
  });
});

// Rimuoviamo la classe quando il file esce o viene rilasciato
['dragleave', 'drop'].forEach(eventName => {
  dropZone.addEventListener(eventName, () => {
    dropZone.classList.remove('drag-over');
  });
});

// Gestione del drop
dropZone.addEventListener('drop', (e) => {
  const files = e.dataTransfer.files;
  if (files.length) {
    const file = files[0];
    const reader = new FileReader();
    
    reader.onload = (evt) => {
      const img = document.createElement('img');
      img.src = evt.target.result;
      preview.appendChild(img);
    };
    
    // Leggiamo il file come Data URL (ad es. immagine)
    reader.readAsDataURL(file);
  }
});

Spiegazione:

1. Disabilitiamo le azioni di default (dragenter, dragover, dragleave, drop) per poter gestire il rilascio del file.
2. Appena il cursore con il file entra o esce dalla drop zone, aggiungiamo/rimuoviamo la classe CSS drag-over, che può cambiare lo stile del bordo.
3. Quando il file viene rilasciato (evento drop), usiamo un oggetto FileReader per leggere il contenuto del file e mostrare un’anteprima.

Questa tecnica è perfetta per siti che necessitano di upload multipli, di anteprima dell’immagine o di caricamento rapido dei contenuti.

Conclusione

Il drag and drop in JavaScript rende il tuo sito web più dinamico, intuitivo e moderno. Che si tratti di riordinare elementi HTML, gestire gallerie di immagini o caricare file con un semplice “trascina e rilascia”, queste funzionalità contribuiscono a migliorare l’esperienza utente e a ridurre i passaggi necessari per svolgere un’operazione.

Prendi spunto dai tre snippet che abbiamo visto e personalizzali per il tuo progetto. Se vuoi continuare ad arricchire il tuo frontend e aggiungere funzionalità avanzate, scopri come creare una Modal in JS e offri ai tuoi utenti un modo elegante per mostrare informazioni o contenuti extra.

FAQ sul Drag and Drop in JavaScript

1. Come posso rendere un elemento HTML trascinabile?
Per rendere un elemento HTML trascinabile, basta aggiungere l’attributo draggable="true" nel markup (es. <li draggable="true">). Dopodiché, bisogna gestire gli eventi dragstart, dragover e drop in JavaScript per definire il comportamento personalizzato.

2. Devo usare per forza una libreria esterna?
No, non è necessario. Molte volte l’API nativa di HTML5 è più che sufficiente per gestire situazioni comuni come l’ordinamento degli elementi o il caricamento di file. Se però hai esigenze molto avanzate (ad esempio, drag and drop tra pagine diverse o interfacce complesse), potresti valutare librerie specifiche.

3. Funziona anche su dispositivi mobili?
Il drag and drop nativo non è sempre supportato pienamente sui dispositivi touch. Alcuni browser mobili hanno limitazioni o gestiscono il tocco diversamente. In questi casi, potresti dover ricorrere a librerie specifiche o implementare soluzioni ad hoc per il touch.

4. Posso salvare l’ordine degli elementi dopo averli trascinati?
Assolutamente sì. Una volta che gli elementi sono stati spostati nel DOM, puoi inviare l’ordine aggiornato a un server o memorizzarlo in localStorage. In questo modo, la prossima volta che l’utente ricarica la pagina, potrai ripristinare la stessa disposizione.

5. Come migliorare l’aspetto visivo mentre trascino?
Puoi aggiungere classi CSS sugli eventi dragstart, dragover e drop per evidenziare l’elemento che si sta spostando o la zona in cui verrà rilasciato. Puoi anche utilizzare un’immagine di trascinamento personalizzata impostando dataTransfer.setDragImage() nel codice JavaScript.