I’ve started writing a jQuery plugin called Nestable — try it out.
Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens. If you’re familiar with the way WordPress allows the user to manage menus, this will be used for a similar UI.
The only similar thing I could find was nestedSortable by Manuele J Sarfatti which is dependent on jQuery UI. It works perfectly but I have an irrational dislike for jQuery UI. It just seems so heavy! I may eventually make my version with no dependencies but for now vanilla jQuery is required. Nestable is the result of one afternoon’s work so it’s not fully featured nor fully tested. It does seem to work rather splendidly though.
As always the code is freely available on GitHub. That would be a good place to submit feature requests too as I’ll no doubt be spend a few more hours hacking this soon.
Update 28th June 2012
I’ve pushed quite a few changes to jQuery Nestable:
- List group IDs to allow drag and drop between lists.
- Option to change the a maximum depth.
- Bug fixes.
If this doesn’t float your boat, other options include jQuery UI Sortable (no nested lists), nestedSortable an extension, and jsTree — feature rich! Why is my plugin better? Well it’s less than 5kb minified/gzipped and has very lightweight and customisable CSS & HTML. I’m not going to overpower it with too many features, but if I can make it extensible enough it will be very flexible to build upon.
If you’re using Nestable, or have any suggestions or issues, please post an issue on GitHub rather than a comment here!