jQuery Draggable

In attesa che HTML5 possa essere utilizzato senza ricorrere a strategie di fallback troppo costose, in altre parole, inattesa che ie7 e ie8 scendano ulteriormente come quota di mercato, se vogliamo trascinare elementi in giro per la nostra pagina web possiamo utilizzare jquery UI. La libreria dovrà essere collegata alla pagina dopo jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>

Nell’html inseriremo alcuni elementi, senza una particolare strategia, faremo in modo che siano tutti trascinabili (draggable):

<h2>Trascina tutti gli elementi in giro per lo schermo</h2>
<p>Paragrafo trascinabile</p>
<h2>Titolo trascinabile</h2>
<ul>
<li>Prima lista</li>
<li>Seconda lista</li>
</ul>

Per renderli trascinabili al document.ready applicheremo il selettore universale e il metodo draggable di jQuery UI:

$(document).ready(function() {
$('body *').draggable();
});

Ultimo step, durante il trascinamento applicheremo un css particolare usando una classe appesa al volo da jQuery UI:

<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
</style>

L’esempio