• Programmazione » HTML 5 » Guida HTML5

Vediamo come funziona il drag and drop. Esempi e codici.

Il drag and drop è un’operazione oramai nota: permette di spostare un elemento da un punto A a uno B tramite trascinamento manuale. HTML5 e le nuove API di programmazione JavaScript permettono di dare vita ad ambienti web che possono sfruttare questa tecnica in modo nativo. Le specifiche W3C indicano che questa potente combinazione consentirà di effettuare il drag and drop in documenti web anche di elementi localizzati su comuni personal computer.

La compatibilità browser per ora trova un responso di medio livello: ottimale su Google Chrome e Mozilla Firefox 4, parziale su Internet Explorer 9 e Apple Safari. Oggi prenderemo come esempio drag and drop un “to do list monitor”, ovvero un pannello interattivo diviso in 3 parti i cui dati possono essere spostati con facilità attraverso un semplice tocco del mouse.

Il markup HTML

Il markup HTML appare in questo modo:

<div id="board">  <div id="todo">  <div class="title">Da fare</div>  <div id="item1" draggable="true"><div class="cardTitle">    Impara l’HTML5</div>  </div>  <div id="item2" draggable="true"><div class="cardTitle">    Impara i CSS3</div>  </div>    </div><div id="inprogress"><div class="title">In corso</div></div><div id="done"><div class="title">Fatto</div></div>

Analizziamo una porzione specifica, la seguente:

<div id="board">  <div id="todo">    <div id="item1" draggable="true">    <div id="item2" draggable="true"></div>

La prima cosa che abbiamo fatto è stata rendere draggabile quello che noi abbiamo definito Item, ovvero i quadratini informativi destinati ad essere spostati da una sezione all’altra. L’operazione ha preso come esempio 2 elementi.

Il JavaScript

Il codice JavaScript rappresenta il motore del nostro “to do monitor”: attraverso gli eventi “drgastart”, “dragover” e “drop” ci permetterà di pianificare le singole azioni che gli oggetti dovranno compiere.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">  </script><script type="text/javascript">$('document').ready(init);  function init(){$('#item1, #item2').bind('dragstart', function(event) {    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));});      // impostiamo l’evento dragover agli elementi$('#todo, #inprogress, #done').bind('dragover', function(event) {    event.preventDefault();});// impostiamo l’evento drop agli elementi  $('#todo, #inprogress, #done').bind('drop', function(event) {var notecard = event.originalEvent.dataTransfer.getData("text/plain");event.target.appendChild(document.getElementById(notecard));event.preventDefault();});  }</script>

IL CSS

Questo è il CSS usato per stilizzare gli elementi:

body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}#board{width: 910px;min-height:100px;position:relative;}.title{background-color:#52460a;text-align:center;color:white;padding: 2px 0px;}#inprogress{left:302px;}#done{left:604px;}#todo, #inprogress, #done{background-color: tan;position:absolute;width: 300px;min-height:150px;border: 2px solid black;}*[draggable=true]{float:left;min-width: 50px;min-height: 50px;border: 2px solid black;margin: 10px;font-weight:bold;min-height:60px;background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0.63, white),  color-stop(0.92, rgb(5,161,245)));  background-image:-moz-linear-gradient( center top,white 63%,rgb(5,161,245) 92%  ); -webkit-background-size:1px 8px; -moz-background-size:1px 8px; background-size:1px 8px; background-repeat:repeat;}.cardTitle{background-color: rgb(255,255,255);border:2px solid white;}