Bentrovati a tutti! Oggi vi spegherò come usare le nuove api per il drag & drop introdotte in HTML5. Purtroppo, ora come ora, il supporto a questa funzione lo possiamo trovare su ChromeFirefox 4 e in parte su Internet Explorer 9 e  Safari. Quindi gli esempi odierni funzioneranno alla perfezione solo sui primi due browser elencati.

 

Che cos'è

Il drag & drop è una funzione tutt'altro che nuova. La usiamo abitualmente sui nostri computer quando trasciniamo file (drag) da una cartella e li lasciamo in un'altra (drop) senza usare il copia-incolla o il taglia-incolla. Anche oggi su alcune pagine web è possibile trovare un'implementazione basata su javascript e la posizione del cursore, ma oltre ad essere complicata non offre la libertà garantita da HTML5.

 

Per iniziare

Implementare il drag & drop in una pagina web è veramente facile. I passi principali sono quattro:

  1. Indicare quali oggetti oggetti sono trascinabili
  2. Decidere cosa fare dei dati dell'oggetto trascinato
  3. Comunicare al browser su quali oggetti puoi "lasciare" gli oggetti trascinati
  4. Indicare le azioni da compiere una volta che è avvenuto il drop.

Le parti più complicate sono la seconda e l'ultima.

 

Un piccolo esempio con immagini

Quello che segue è un semplice esempio sul drag & drop.

e questa è la parte di codice che ci interessa:

     <body><br />            <img src="immagini_drag_drop/chrome.jpg" alt="Google Chrome"/><br />            <img src="immagini_drag_drop/firefox.png" alt="Firefox"/><br />            <img src="immagini_drag_drop/ie.jpg" alt=" Internet Explorer"/><br />            <img src="immagini_drag_drop/opera.png" alt="Opera"/><br />            <div><br />                Trascina qui le immagini<br />            </div><br />            <script><br />                $("img")<br />    <span class="Apple-style-span" style="font-family: monospace;">            //Indica all'utente quali elementi sono trascinabili cambiando il cursore del mouse</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            .css("cursor", "move")</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            //Indica al browser gli elementi trascinabili e cose fare dei dati di questi elementi (punto 1 e 2)</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            .bind("dragstart", function(ev) {</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                //con queste due righe di codice si salva una parte dei dati</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                var dt = ev.originalEvent.dataTransfer;</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                dt.setData("Text", this.alt);</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                return true;</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            });</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            //Indica al browser su quali elementi puoi trascinare gli oggetti (punto 3)</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            $("div")</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            //dragenter dragleave dragover di solito sono usati per cambiare l'aspetto grafico</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            .bind("dragenter", function (ev){</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                $(this).css("background-color", "b959fc").css("cursor", "copy");</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                return false;</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            })</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            .bind("dragleave", function (ev){</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                $(this).css("background-color", "white");</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                return false;</span><br />    <span class="Apple-style-span" style="font-family: monospace;">             })</span><br />    <span class="Apple-style-span" style="font-family: monospace;">            .bind("dragover", function (ev){</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                $(this).css("background-color", "#b959fc");</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                return false;</span><br />    <span class="Apple-style-span" style="font-family: monospace;">             })</span><br />    <span class="Apple-style-span" style="font-family: monospace;">         //Indica cosa fare una volta avvenuto il drop (punto 4)</span><br />    <span class="Apple-style-span" style="font-family: monospace;">          .bind("drop", function (ev){</span><br />    <span class="Apple-style-span" style="font-family: monospace;">              $(this).css("background-color", "white");</span><br />    <span class="Apple-style-span" style="font-family: monospace;">              //Impedisce al browser di selezionare il testo invece di trascinare gli elementi(per internet explorer 9)</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                 if (ev.preventDefault) {</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                     ev.preventDefault();</span><br />    <span class="Apple-style-span" style="font-family: monospace;">                 }</span><br />    <span class="Apple-style-span" style="font-family: monospace;">             //recupero i dati salvati in precedenza e li uso per modificare il contenuto del target</span><br />    <span class="Apple-style-span" style="font-family: monospace;">             var tmp = ev.originalEvent.dataTransfer.getData("Text");</span><br />    <span class="Apple-style-span" style="font-family: monospace;">             this.innerHTML = tmp;</span><br />    <span class="Apple-style-span" style="font-family: monospace;">             return false;</span><br />    <span class="Apple-style-span" style="font-family: monospace;">             });</span><br />    <span class="Apple-style-span" style="font-family: monospace;">        </script></span><br />    <span class="Apple-style-span" style="font-family: monospace;"></body>    </span>

Da notare l'utilizzo di Jquery per assegnare gli eventi tramite il .bind() e gestire le regole css. Essendo un tool cross-browser, facilita il lavoro mantenendo la compatibilità con tutti i browser.

Come potete vedere, la parti ostiche sono quelle che seguono gli eventi dragstart e drop. Purtroppo in questo caso non esiste una regola generale perchè le implementazioni cambiano radicalmente in base all'utilizzo. Quello riportato è il codice per salvare e richiamare il contenuto degli oggetti che è una delle cose più comuni e, a mio avviso, utili.

 

Esempio con dati più complessi

Riporto anche un'altro esempio che utilizza elementi più complessi rispetto alle immagini:

e il codice javascript che gestisce il tutto:

<script><br />                //Cambia il cursore sugli elementi trascinabili per renderli visibili<br />                $(".draggable").css("cursor", "move");<br />    <br />    <br />                $(".draggable")<br />                //Indica al browser quali elementi sono trascinabili, in questo caso attraverso una classe.<br />                .attr("draggable", "true")<br />                //Specifica cosa fare quanto un elemento viene trascinato. In questo caso salvo il contenuto tramite<br />                // innerHtml<br />                .bind('dragstart', function(ev) {<br />                    var dt = ev.originalEvent.dataTransfer;<br />                    dt.setData("Text", this.innerHTML);<br />                    return true;<br />                });<br />    <br />    <br />                var i=0;<br />    <br />    <br />                //Indica al browser l'elemento (per più elementi fare una classe) in cui puoi trascinare gli oggetti.<br />                $("#drop")<br />                //Dragenter indica l'evento "entro nel target mentre sto trascinando qualcosa"<br />                .bind("dragenter", function (ev){<br />                    $(this).css("background-color", "white");<br />                    return false;<br />                })<br />                //Dragleave indica l'evento "esco dal target mentre sto trascinando qualcosa"<br />                .bind("dragleave", function (ev){<br />                    $(this).css("background-color", "#acd6ec");<br />                    return false;<br />                })<br />                //Dragover indica l'evento "sono sul target mentre sto trascinando qualcosa"<br />                .bind('dragover', function(ev) {<br />                    $(this).css("cursor", "copy");<br />                    return false;<br />                })<br />                //Dragover indica l'evento "deposito l'elemento che ho trascinato nel target".<br />                .bind("drop", function (ev){<br />                    $(this).css("background-color", "#acd6ec");<br />                    //con questa riga ottengo i dati salvati quando ho iniziato a trascinare l'oggetto'<br />                    var tmp = ev.originalEvent.dataTransfer;<br />                    var txt = document.getElementById("res");<br />                    if(i==0){<br />                        this.innerHTML = tmp.getData("Text")+" + ";<br />                        txt.value= tmp.getData("Text");<br />                        i++;<br />                    }<br />                    else{<br />                        this.innerHTML += tmp.getData("Text")+" + ";<br />                        txt.value = parseInt(txt.value)+ parseInt(tmp.getData("Text"));<br />                    }<br />                    return false;<br />                });<br />    <br />    <br />            </script>

Di default i browser interpretano come trascinabili solo le immagini. Per implementare questa funzione a qualsiasi tipo di elemento bisogna aggiungere come attributo html draggable="true". Nell'esempio è stato fatto tramite Jquery con la funzione .attr("draggable", "true").

E con questo siamo giunti al termine del tutorial e quindi non mi resta che augurarvi buon lavoro. Alla prossima!

The following two tabs change content below.