Mark Mintoff My superpower is common sense


JQueryUI Hierarchical Sorting

Recently I have taken an interest in adapting JQueryUI's Sortable plugin in order to create a hierarchical (parent->child) sortable model. Unfortunately this proved to be difficult to do and after several adaptations using various HTML elements and JQuery configuration, I was disappointed by how unwieldy it was to move nodes about. There was a persistent jittering which I was unhappy about.

Fortunately, I happened upon Manuele J Sarfatti's nestedSortable plugin which visually presented exactly what I wanted.

My only complaint with Mr Sarfatti's plugin is it's poor serialization technique, which doesn't do a very good job of handling ID's which are in GUID format. For this reason, I created my own serialization methodology to render the hierarchy into an XML structure:

This would then serialize the hierarchy achieved in the following format:

Usage of Mr.Sarfatti's plugin is surprisingly easy:

With the following HTML:

Results in this little downloadable demo:

Let me know if there's anything you get confused about and happy coding!

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)