Corsi on-line

Drag & Drop bidirezionale con HTML5

In un precedente articolo abbiamo mostrato come sia possibile ottenere un semplice effetto Drag & Drop tramite l’impiego di HTML5 e l’adozione di poche righe di codice JavaScript; l’esempio già mostrato è però basato sul “trascinamento unidirezionale”, motivo per il quale non sarà possibile effettuare un nuovo spostamento dell’elemento coinvolto per il ripristino della condizione di default (“trascinamento bidirezionale”).

In sostanza, con la piccola l’applicazione proposta in questo post otterremo un’implementazione grazie alla quale, dopo aver inserito un oggetto (come per esempio un’immagine) in un contenitore (ad esempio una divbox), esso potrà essere riportato al di fuori di quest’ultimo come da impostazione iniziale. Per rendere ancora più chiaro il funzionamento della procedura attesa, l’elemento trascinato, rilasciato e successivamente ritrascinato nella sua sede originale sarà contenuto da subito in una divbox nella quale potrà essere riposizionato attraverso un secondo Drag & Drop.

Se una descrizione non dovesse bastare per descrivere il comportamento desiderato, l’immagine seguente potrebbe riassumere in modo abbastanza semplice l’effetto che si andrà ad ottenere:

Img

Ora spazio al codice, le funzioni e i costrutti utilizzati sono in pratica gli stessi proposti nell’articolo precedente ed è ad esso che si potrà fare riferimento per i chiarimenti di carattere sintattico:

<!DOCTYPE HTML>
<html>
<head>
<style>
#dragbox, #dropbox
{
width:120px;
height:40px;
margin:15px;
padding:15px;
border:1px dashed grey;
}
</style>
<script>
function dragDrop(y) {
y.preventDefault();
}
function trascina(y) {
y.dataTransfer.setData("text", y.target.id);
}
function rilascia(y) {
y.preventDefault();
var data = y.dataTransfer.getData("text");
y.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="dragbox" ondrop="rilascia(event)" ondragover="dragDrop(event)">
<img src="img.png" id="imgdrag" draggable="true" ondragstart="trascina(event)" />
</div>
<div id="dropbox" ondrop="rilascia(event)" ondragover="dragDrop(event)"></div>
</body>
</html>

Sono naturalmente possibili ulteriori implementazioni, un sistema completo per il Drag & Drop potrebbe essere utilizzato, per esempio, nello sviluppo di carrelli della spesa per negozi di commercio elettronico o per la creazione di sistemi che semplifichino le procedure per l’upload dei file tramite modulo.

Post correlati
I più letti del mese
Tematiche