JavaScript: usare il drag and drop nativo

Il drag and drop nativo è una feature implementata in JavaScript già da alcuni anni.

Per poter utilizzare questa feature occorre dichiarare un elemento come draggable tramite l'attributo corrispondente.

<div id="test" draggable="true">Drag me</div>
<div id="drop"></div>

Vogliamo consentire l'aggiunta di più copie dell'elemento originale all'interno dell'elemento che lo segue. La soluzione più semplice è quella di creare ogni volta una copia dell'elemento clonando i suoi contenuti.

Dobbiamo usare tre eventi specifici del drag and drop:

1. dragstart: l'elemento comincia ad essere trascinato.
2. dragover: l'elemento si trova sull'elemento di destinazione.
3. drop: l'elemento viene rilasciato nell'elemento di destinazione.

Come facciamo a copiare i contenuti dell'elemento originale da un evento all'altro? Usando le API dell'oggetto event.dataTransfer, con cui è possibile salvare temporaneamente diversi tipi di dati in uno storage dedicato dell'evento.

let draggable = document.querySelector('#test');
    let droppable = document.querySelector( '#drop');

    draggable.addEventListener('dragstart', e => {
        let dt = e.dataTransfer;
        let target = e.target;
        dt.setData('text/plain', target.innerText);
    });
    droppable.addEventListener('dragover', e => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    });
    droppable.addEventListener('drop', e => {
        e.preventDefault();
        let dt = e.dataTransfer;
        let text = dt.getData('text/plain');
        let el = document.createElement('div');
        el.className = 'droppable';
        el.innerHTML = text;
        droppable.appendChild(el);
    });
 

Ricordiamo che event.target fa riferimento all'elemento a cui è stato legato l'evento. Il metodo preventDefault() viene qui usato per impedire al browser di applicare il suo comportamento predefinito durante il trascinamento ed il rilascio dell'elemento.

Demo

JavaScript: drag and drop