Implementare il drag and drop per il riordinamento degli elementi con JavaScript

Il drag and drop è una funzionalità comune nelle interfacce moderne che consente agli utenti di riordinare elementi in modo intuitivo e diretto. Grazie alle API HTML5, è possibile implementare questa caratteristica senza ricorrere a librerie esterne, mantenendo un controllo completo sul comportamento.

Struttura HTML di Base

Per abilitare il riordinamento, occorre predisporre un contenitore con più elementi figli, ognuno contrassegnato come "trascinabile". Un esempio di markup generico potrebbe essere:

<ul class="sortable-list">
    <li class="sortable-item" draggable="true">Elemento 1</li>
    <li class="sortable-item" draggable="true">Elemento 2</li>
    <li class="sortable-item" draggable="true">Elemento 3</li>
</ul>

Gestione degli Eventi di Drag and Drop

Il meccanismo si basa sull'ascolto di eventi come dragstart, dragover e drop. L'elemento trascinato viene memorizzato e poi inserito nella nuova posizione in base al punto in cui viene rilasciato.

document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.sortable-list');

    containers.forEach(container => {
        let draggedElement = null;

        container.addEventListener('dragstart', e => {
            if (e.target.classList.contains('sortable-item')) {
                draggedElement = e.target;
                e.dataTransfer.effectAllowed = 'move';
                e.target.classList.add('dragging');
            }
        });

        container.addEventListener('dragend', () => {
            if (draggedElement) {
                draggedElement.classList.remove('dragging');
                draggedElement = null;
            }
        });

        container.addEventListener('dragover', e => {
            e.preventDefault();
            const target = e.target.closest('.sortable-item');
            if (target && target !== draggedElement) {
                const rect = target.getBoundingClientRect();
                const offset = e.clientY - rect.top;
                const shouldInsertAfter = offset > rect.height / 2;
                container.insertBefore(
                    draggedElement,
                    shouldInsertAfter ? target.nextSibling : target
                );
            }
        });
    });
});

Considerazioni di Accessibilità

L'implementazione base del drag and drop è visiva, ma per migliorare l'accessibilità è consigliabile offrire anche metodi alternativi di riordinamento, ad esempio comandi da tastiera o pulsanti dedicati.

Conclusione

L'uso delle API di drag and drop native consente di implementare in poche righe di codice un sistema per riordinare elementi in pagina. Questo approccio è flessibile, non richiede dipendenze esterne e può essere facilmente esteso per integrare salvataggi automatici lato server o funzionalità avanzate.