Jquery – Best option for sortable/draggable layout selector

draggablejqueryjquery-uijquery-ui-sortablelayout

For my current project, I need to make a layout selector where certain elements can be dragged and repositioned by the user, similar to this mockup:

alt text

So far, I have been able to replicate something similar using JQuery UI and Sortable, however I am currently stuck only on the first level of control, where vertical elements can be repositioned. I am having difficulty figuring out what the best approach is to handle the nested horizontal elements (like the content/sidebar sections).

Ideally, I need this to not only position the order of each section (header, body, footer, etc.) but also the alignment of sections (content to left, sidebar to right and vice versa).

Best Solution

You could maybe have a look at Isotope, a powerful layout editor.

Related Question