jQuery drag&drop (1)

<div id="contenitore"><div id=”box1″><p>Prodotto 1</p></div>
<div id=”box2″><p>Prodotto 2</p></div>
<div id=”box3″><p>Prodotto 3</p></div>
<div id=”box4″><p>Prodotto 4</p></div>
<div id=”box5″><p>Prodotto 5</p></div>
<div id=”landing_area”></div></div>
<div>

Per comodità i div da trascinare hanno id e la medesima classe, questo velocizzerà anche la creazione del css:

.box{ width:100px; height:60px; border:1px solid #000; margin-bottom:10px; padding:5px; z-index:1;}
#box1{ background-color:#FC0;}
#box2{ background-color:#9CF;}
#box3{ background-color:#96F;}
#box4{ background-color:#6C9;}
#box5{ background-color:#9F3;}
#landing_area{ width:200px; height:300px; position:absolute; top:8px; left:200px; padding:5px; border:2px solid #900; z-index:0; }

Lo stile è spartano, serve solo per distinguere gli oggetti.
Si noti però che gli elementoi da trascinare hanno uno z-index superiore all’area di atterraggio.

Per la nostra attività necessitiamo di Jquery e jQuery UI:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>

che includiamo nell’head della pagina insieme al css di default:

<link rel=”stylesheet” type=”text/css” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css” />

A questo punto rendiamo trascinabile tutti gli elementi di classe box:

$(document).ready(function(e) {
$(‘.box’).draggable();
})

Se vogliamo arricchire i comportamenti, possiamo aggiungere una classe che rende trasparente l’oggetto appena iniziamo a trascinarlo e facciamo in modo che una volta rilasciato torni al suo posto:

$(‘.box’).draggable({
revert:true,
start:function(event,ui){$(this).addClass(‘movimento’);},
stop:function(event,ui){
$(this).removeClass(‘movimento’);
}
});

La classe movimento aggiunge solo l’opacità:

.movimento{ opacity:0.5;}

al rilascio ovviamente la togliamo

Volete sapere dove avete rilasciato il vostro oggetto?
La pagina è un piano cartesiano, quindi:

var top=ui.position['top'];
var left=ui.position['left'];
alert(top+’ ‘+left);

Infine predisponiamo l’area di atterraggio:

$(‘#landing_area’).droppable({
accept:’.box’,
tolerance:’fit’
});

Dove stabiliamo gli elementi che accettiamo, tutta la classe box e quando li possiamo considerare all’interno dell’area
con il parametro tolerance, a volte potrebbe bastare toccare le pareti, altre volte bisognerà essere completamente all’interno

Esempio