Ultimo aggiornamento: 17 giugno 2020

Drag and Drop

Introduzione

La maggior parte degli utenti di applicazioni grafiche conosce le operazioni di trascinamento (drag) e rilascio (drop) di elementi grafici, spesso associate alla esecuzione di funzioni sugli oggetti interessati (un esempio è la cancellazione di un file tramite il suo trascinamento nel cestino).

1. posizionamento del cursore sull'oggetto mediante il mouse;
2. pressione del tasto sinistro del mouse;
3. spostamento dell'oggetto con il mouse mantenendo la pressione del tasto sinistro;
4. rilascio del tasto sinistro del mouse quando l'oggetto trascinato si trova nella posizione desiderata.

HTML5 ha reso disponibili un insieme di funzionalità che permettono di realizzare il drag and drop degli elementi delle pagine web. Vediamo in cosa consistono.

Attributo draggable

Tutti gli elementi HTML possono essere resi "trascinabili" settando a "true" il loro attributo draggable. L'attributo draggable ha tre stati: true, false, auto. Il valore di default è auto che setta il valore dell'attributo a true o false a seconda del comportamento di default per esso previsto dallo user agent (browser).
Gli elementi di tipo img e di tipo a con attributo href hanno per default stato draggable uguale a true.

Gli altri elementi possono essere resi trascinabili ponendo draggable="true". Proprio quello che ho fatto per questo paragrafo, per il quale ho anche impostato la proprietà di stile cursor:move;

Il fatto di settare a true l'attributo draggable di un elemento fa si che il contenuto visibile dell'elemento stesso possa essere selezionato per le operazioni di drag and drop, ma nulla sarà eseguito se non si gestiscono, tramite codice JavaScripts, gli eventi generati a tale scopo.

Esempio 1

Per introdurre i meccanismi con cui HTML5 implementa le funzionalità di drag and drop descriveremo come permettere alle ciliege di essere trascinate dall'area verde a quella gialla e viceversa esaminando i frammenti di codice HTML, CSS e JavaScript realizzati.

Codice HTML

<div id="esempio1">
   <div id="origine" ondragover="DragOver(event)" ondrop="Drop(event)">
      <img alt="foto con ciliegie" src="../photos/ciliege.jpg" id="ciliegie" ondragstart="iniziaDrag(event)"  width="150"/>
   </div>
   <div id="destinazione" ondragover="DragOver(event)" ondrop="Drop(event)"></div>
</div>

Codice CSS

      #esempio1   { background-color:white; height:150px; } 
      #origine    { position:relative; top:10px;   left:50px;  width:170px; height:135px; background-color:#af3;}
      #destinazione  { position:relative; top:-125px; left:250px; width:170px; height:135px; background-color:#ff3;}
      #ciliegie   { cursor:move; padding:10px;}

Codice JavaScript

Consiste degli handler degli eventi ondragstart, ondragover, ondrop:

      var foto;   /* variabile usata per memorizzare l'attributo id dell'oggetto trascinato. */

      function iniziaDrag(event){
                  /* carica in foto l'attributo id dell'elemento trascinato */
         foto=event.target.getAttribute("id");
      }

      function DragOver(event){
                  /* per default gli elementi html non accettano l'operazione di drop
                     preventDefault() annulla il comportamento di default.*/
         event.preventDefault();
      }
       function Drop(event){
                  /* recupera dal documento corrente l'elemento il cui identificatore è stato 
                     precedentemente caricato in foto e lo appende al contenitore di destinazione.
         event.target.appendChild(document.getElementById(foto));
      }