Appunti e tutorial su front-end web technology

Proviamo a costruire un albero i cui elementi possono essere trascinati, potrebbe tornare molto utili per organizzare diverse informazioni.

A livello di html si tratta di costruire una lista contenente elementi di secondo livello:

<h2>Sposta gli elementi dell'albero</h2>
<ul id="target">
<li>And a list</li>
<li>With items</li>
<li>
And items containing subitems
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>And more items containing subitems
<ul>
<li>Sub 4</li>
<li>Sub 5</li>
</ul>
</li>
</ul>

Useremo anche un piccolo css per creare comodo spazio di trascinamento (è bene non trascurare l’aspetto visivo):

ul {
border: 1px dashed gray;
margin: 10px;
padding: 10px 10px 10px 30px;
}

Infine rendiamo tutto operativo con jQuery UI

$(document).ready(function() {
$('ul').sortable({connectWith: 'ul'});
});

L’esempio

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