May 042013
Lo scopo di trascinare elementi attraverso una pagina web spesso è quello di rilasciarli in una landing area particolare.
Costruiamo una pagina con un elemento da trascinare e una landing area costituita da un div, i nostri elementi saranno opportunamente formattati tramite css:
<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
#target { width: 400px;height: 100px;border: 2px solid black;}
</style>
...
<span>SPAN</span>
<div id="target">Rilascia il tag span nel rettangolo</div>
Come nel post precedente durante il trascinamento cambieremo lo stile all’elemento trascinato.
Attiviamo lo script al document.ready:
$(document).ready(function() {
$('#target').droppable();
$('span').draggable();
});
In questo modo abbiamo definito l’elemento trascinabile e la landing area per la ricezione degli elementi trascinati.
Si tratta di gestire gli eventi del rilascio all’interno dell’area e del passaggio sul bordo, assoceremo due semplici funzioni che scriveranno all’interno del target:
$('#target').droppable({
drop: function() {
$(this).html('DROPPED!');
},
out: function() {
$(this).html('ancora un po...');
}
});
L’esempio