jQuery sortable tree

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