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

 

 

Sorry, the comment form is closed at this time.