Creare una lista riordinabile con il trascinamento

Per creare un elenco riordinabile tramite trascinamento, renda ogni elemento trascinabile, memorizzi l'id dell'elemento trascinato in dataTransfer durante dragstart e, al rilascio, inserisca l'elemento trascinato prima o dopo la destinazione. Il DOM e il modello rimangono sincronizzati se ricostruisce l'ordine a partire dal DOM dopo ogni rilascio.

Visualizzi un elenco piatto in cui ogni li contiene draggable="true" e un data-id. Mantenere gli id sugli elementi significa che i gestori del trascinamento non devono interrogare un archivio di stato separato per identificare gli elementi: l'elemento stesso è la fonte di verità.

Durante dragstart, memorizzi l'id dell'elemento trascinato in dataTransfer e applichi una classe "dragging" per fornire un feedback visivo. effectAllowed="move" comunica al browser che si tratta di un riordino e non di una copia, perciò il cursore e dropEffect riflettono un'operazione di spostamento.

Ascolti gli eventi sull'elenco (event delegation), chiami preventDefault e imposti dropEffect su "move". Utilizzi e.target.closest("li") per trovare la riga sotto il cursore, così lo stesso gestore funziona per l'intero elenco.

Per decidere se l'elemento trascinato debba essere posizionato sopra o sotto la riga sotto il cursore, confronti la coordinata Y del cursore con il punto medio verticale della riga: const before = (e.clientY - rect.top) < rect.height / 2. before=true significa inserire con insertBefore, mentre false significa inserire con insertAfter.

Nel gestore di drop, cerchi l'elemento trascinato tramite il suo id e la riga di destinazione sotto il cursore. Chiami list.insertBefore(dragged, target) oppure list.insertBefore(dragged, target.nextSibling) a seconda della metà della destinazione che era sotto il cursore.

Indipendentemente dal fatto che il rilascio sia riuscito o che l'utente abbia premuto Escape, dragend viene sempre attivato sull'origine. Lo utilizzi per rimuovere la classe "dragging" e tutte le evidenziazioni della destinazione, così l'elenco torna allo stato inattivo.

Mostri una linea sottile nel punto in cui verrà posizionato l'elemento utilizzando uno pseudo-elemento CSS sulla riga sotto il cursore, attivato tramite la classe "over-top" o "over-bottom" che il gestore di dragover imposta in base alla posizione del cursore. L'utente vede il punto di inserimento prima di rilasciare l'elemento.

Dopo il rilascio, ricavi il nuovo ordine dal DOM: const order = Array.from(list.children).map((li) => li.dataset.id). Invii questo array al server o lo memorizzi nello stato: non cerchi mai di mantenere un indice parallelo insieme al DOM, perché si desincronizza durante i trascinamenti rapidi.

Aggiunga gestori Up/Down che spostino l'elemento attivo tramite insertBefore. Comunichi lo spostamento tramite una regione aria-live ("Item moved up to position 2"). Gli utenti che usano la tastiera ottengono la stessa funzionalità senza dover ricorrere al trascinamento visivo, un aspetto essenziale per l'accessibilità.

Per i dispositivi mobili, sostituisca il trascinamento nativo con i Pointer Events: durante pointerdown acquisisca la riga, durante pointermove la trasli con CSS transform e durante pointerup individui tramite hit-test la riga sottostante e riordini gli elementi. Librerie come SortableJS incapsulano questo pattern per diversi tipi di input.

Un elenco riordinabile robusto combina draggable="true" + dragstart (registrazione dell'id, effectAllowed=move) + dragover (preventDefault + posizione dell'indicatore) + drop (insertBefore nello spazio calcolato in base al punto medio) + dragend (ripulitura). Ricavi sempre il nuovo ordine dal DOM dopo il rilascio e fornisca un'alternativa da tastiera per l'accessibilità.