Creare una griglia kanban con JavaScript

Una griglia kanban è basata sul drag and drop con si possono spostare gli elementi da una colonna all'altra. In questo articolo vedremo come implementare il codice JavaScript necessario per gestire questo tipo di componente.

Per poter essere trascinato e rilasciato, un elemento deve avere l'attributo draggable impostato su true. In seguito vengono innescati i seguenti eventi del DOM in sequenza:

1. dragstart: l'operazione di trascinamento ha inizio sull'elemento scelto a cui possiamo accedere tramite la proprietà target dell'oggetto event; event.dataTransfer.effectAllowed ci permette di specificare l'effetto visuale che verrà usato.
2. dragover: si innesca quando l'elemento scelto si trova sopra un altro elemento.
3. dragend: si innesca quando il trascinamento è terminato.
4. drop: si innesca quando l'elemento scelto viene rilasciato.

Tuttavia, questi eventi controllano solo le fasi del trasferimento e del rilascio, e per far si che l'elemento scelto venga spostato dalla colonna di partenza a quella di destinazione a livello DOM, dobbiamo:

1. Marcare l'elemento scelto con una classe CSS speciale quando l'operazione ha inizio.
2. Ignorare o bloccare gli eventi intermedi.
3. Sull'evento drop, selezionare l'elemento scelto, clonarlo e aggiungerlo al contenitore di destinazione, rimuovendolo dal DOM all'interno della stessa operazione.

L'aspetto fondamentale da comprendere è che questi eventi vanno gestiti a livello degli elementi genitori degli elementi da trascinare perché sono appunto le colonne della griglia (contenitori) a dover essere manipolate a livello del DOM.

Quindi possiamo scrivere:

function dragItems() {
  document.querySelectorAll('.kanban-items').forEach((container) => {

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

    container.addEventListener('dragend', (e) => {
        e.preventDefault();
    });

    
    container.addEventListener('dragover', (e) => {
      e.preventDefault();
    });

    
    container.addEventListener('drop', (e) => {
      const draggedEl = document.querySelector('.dragged'); 
      if (draggedEl) {
         const copy = draggedEl.cloneNode(true);
         container.appendChild(copy);
         draggedEl.remove();
      }
      e.preventDefault();
    });
  });
}

Il metodo cloneNode() serve a copiare in questo caso l'elemento trascinato con tutti i possibili eventi ad esso associati. Una volta copiato e inserito nella colonna/contenitore che gestisce l'evento drop, l'elemento originario può essere rimosso dal DOM.

Demo

JavaScript Kanban

Conclusione

Questo tipo di componenti ci permette di applicare il drag and drop nativo di JavaScript per implementare la funzionalità principale della griglia.