jQuery Sortable, horizontally snap to grid

Question

I have a form that generates divs wrapped in an li. I have made this list sortable.

I also need to find a way for the li to indent 40px to the right (visually making it a child of the li above). If an li is indented, then the next li has the option to be indented by 80px. This will be used to create a menu tree.

I have the form working, here is the fiddle, http://jsfiddle.net/clintongreen/BMX4J/11/

I have no idea how to do the horizontal snapping though, please help

The purpose of this is to mimic the functionality found in Wordpress - WPAdmin/Appearance/Menus/Pages

Please ask if you have any questions. Cheers

Answer 1

Nested Sortable jQuery Plugin is a nice place to start.