Drag & Drop con JavaScript: rendere i contenuti trascinabili senza librerie esterne

Il drag & drop è una delle interazioni più naturali e intuitive che possiamo offrire agli utenti: cliccare su un elemento, trascinarlo e rilasciarlo in un altro punto. Pensiamo a quando organizziamo file in una cartella, spostiamo widget su una dashboard o riordiniamo le attività in una lista "to-do".

Molti sviluppatori ricorrono a librerie esterne per implementare questa funzionalità ma in realtà JavaScript ci offre già tutti gli strumenti per gestire il drag & drop in modo semplice e performante, senza dipendere da framework. In questo articolo scopriremo quindi: come funziona l'API drag & drop nativa e quali eventi JavaScript ci servono. Vedremo poi un esempio pratico di elementi trascinabili e forniremo dei consigli su eventuali miglioramenti.

Cos'è il drag & drop?

Drag & drop significa letteralmente "trascina e rilasciaù2. Si tratta di una combinazione di eventi mouse/touch che permettono di:

• selezionare un elemento (drag start).
• Trascinarlo sopra una destinazione (drag over).
• Rilasciarlo nel nuovo punto (drop).

Il bello è che tutto questo può essere gestito con poche righe di JavaScript e con proprietà HTML

<div draggable="true">Trascinami!</div>

Il browser riconoscerà subito l'elemento come "draggable".

Gli eventi principali per il drag & drop

Durante il ciclo del drag & drop possiamo sfruttare diversi eventi:

dragstart	Quando l'utente inizia a trascinare l'elemento.
drag	Mentre l'elemento viene trascinato.
dragend	Quando il trascinamento termina (rilasciato o annullato).
dragover	Nel momento in cui un elemento trascinabile passa sopra un'area di destinazione.
dragenter	Quando entra nell'area di destinazione.
dragleave	Quando esce dall'area di destinazione.
drop	Se viene effettivamente rilasciato.

Con questi eventi possiamo decidere cosa succede in ogni fase. Di seguito proporremo un esempio pratico su come spostare un box in un contenitore.

Il codice HTML

<div class="contenitore">
  <div class="box" draggable="true">Box 1</div>
  <div class="box" draggable="true">Box 2</div>
  <div class="box" draggable="true">Box 3</div>
</div>
<div class="destinazione">Rilascia qui</div>

Il codice CSS

.contenitore, .destinazione {
  border: 2px dashed #aaa;
  min-height: 150px;
  padding: 10px;
  margin: 20px;
}
.box {
  background: #4caf50;
  color: #fff;
  padding: 10px;
  margin: 5px;
  cursor: grab;
  border-radius: 5px;
}

.destinazione {
  background: #f9f9f9;
}

Il codice JavaScript

const boxes = document.querySelectorAll(".box");
const destinazione = document.querySelector(".destinazione");
boxes.forEach(box => {
  box.addEventListener("dragstart", e => {
    e.dataTransfer.setData("text/plain", box.id || box.textContent);
    box.classList.add("trascinando");
  });

  box.addEventListener("dragend", () => {
    box.classList.remove("trascinando");
  });
});
destinazione.addEventListener("dragover", e => {
  e.preventDefault(); // Necessario per permettere il drop
});

destinazione.addEventListener("drop", e => {
  e.preventDefault();
  const data = e.dataTransfer.getData("text/plain");
  const elemento = [...boxes].find(b => (b.id || b.textContent) === data);
  if (elemento) destinazione.appendChild(elemento);
});

Con questo codice possiamo trascinare i box all'interno dell'area di destinazione, senza alcuna libreria esterna.

Migliorare l'esperienza utente

• Stili dinamici: cambiare il cursore o il colore dell'area quando un elemento è sopra (dragover).
• Accessibilità: garantire che l'interazione funzioni anche da tastiera, non solo con mouse o touch.
• Feedback visivo: aggiungere classi CSS durante dragenter e dragleave per evidenziare le aree valide.
• Mobile support: su alcuni dispositivi touch, il drag & drop nativo non è ancora perfetto; conviene valutare anche eventi touchstart touchmove touchend

Di seguito, un esempio con evidenziazione dell'area:

destinazione.addEventListener("dragenter", () => {
  destinazione.classList.add("highlight");
});

destinazione.addEventListener("dragleave", () => {
  destinazione.classList.remove("highlight");
});
destinazione.addEventListener("drop", e => {
  e.preventDefault();
  destinazione.classList.remove("highlight");
});

.highlight {
  background: #e0f7fa;
  border-color: #00796b;
}

Vantaggi del drag & drop nativo

Il drag & drop nativo in JavaScript non è solo una curiosità tecnica: rappresenta un tassello fondamentale per costruire interfacce interattive. Poter trascinare e rilasciare elementi senza l'ausilio di librerie esterne significa avere più controllo, meno dipendenze e un codice più leggero da mantenere nel tempo.

Pensiamo a quanto questa funzionalità sia diventata comune: dalle liste di attività, come Trello o Asana, fino alle interfacce di gestione file in stile Google Drive, passando per gli editor visuali di siti web e le dashboard personalizzabili. In ognuno di questi casi l'utente si aspetta di poter spostare elementi con un semplice gesto, senza dover cliccare su bottoni nascosti o passare da complicati menu contestuali. Offrire un drag & drop fluido e naturale aumenta la soddisfazione dell'utente e rende l'applicazione più intuitiva.

Nessuna libreria necessaria con un codice leggero e si ha un supporto diretto del browser e performance migliori. Le API standardizzate rendono più facile la manutenzione nel tempo e la compatibilità cross-browser è garantita nella maggior parte dei casi.

Non mancano però delle imitazioni. Su mobile l'esperienza può essere meno fluida, richiede inoltre un po' di codice per gestire casi complessi (ordinamento di liste, salvataggio posizioni, ecc.). Alcuni browser meno recenti hanno infine delle implementazioni parziali.

Non bisogna quindi dimenticare alcune sfide. Sui dispositivi mobile l'esperienza non è ancora sempre perfetta e per una piena accessibilità serve offrire alternative a chi non può usare il mouse o il touch. Investire un po' di tempo nell'ottimizzare questi aspetti rende il drag & drop non solo più elegante ma anche più professionale.

Conclusione

Dal punto di vista dello sviluppatore, padroneggiare l'API drag & drop significa poter andare oltre le soluzioni preconfezionate. Certo, librerie come SortableJS o Dragula possono essere utili nei progetti più grandi, ma avere la consapevolezza di come funziona la meccanica di base ti permette di adattarla, ottimizzarla e persino combinarla con altre tecnologie. Ad esempio, potresti salvare la posizione degli elementi in LocalStorage per ricordare le scelte dell'utente, o sincronizzare i trascinamenti in tempo reale attraverso WebSockets in applicazioni collaborative multiutente.

Guardando al futuro, è probabile che il drag & drop nativo diventi ancora più potente, magari con nuove API pensate per migliorare il supporto su mobile e tablet. Già oggi la combinazione con altre tecnologie come CSS Houdini, Web Animations API e Service Worker apre scenari entusiasmanti: elementi che non solo si spostano ma si animano, reagiscono in tempo reale e restano persistenti anche offline.

In definitiva, imparare a gestire il drag & drop con JavaScript ti fornisce una competenza che va oltre il singolo progetto: è un investimento a lungo termine nella tua crescita come sviluppatore front-end. E quando ti troverai davanti alla scelta tra importare l'ennesima libreria o scrivere poche righe di codice personalizzato, saprai di avere tutte le carte in regola per optare per la seconda strada.

Il drag & drop è, e resterà, una delle interazioni più apprezzate dagli utenti: semplice, immediata, naturale. Con JavaScript nativo, hai la possibilità di implementarla in modo pulito, performante e sostenibile, costruendo esperienze web che uniscono usabilità e tecnologia.