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:
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).