Allow user to change layout of web page

I have a web page that allows users to insert form input objects with a label. When they add a new object I automatically add it to a 2 column table, the left column is the label and the right is the form control.

I want to give the user more control over how the page is layed out. I was wondering if there are any examples, patterns or suggestions that would help me achieve this. The only example I found is in Liferay, where you can choose different layout templates and then position portlets on that page according to the layouts and ordering.

Update:

I would like to persist the layout they design.

I already have the form itself persisted. The HTML is not persisted, I generate it on the fly when the form is requested. I would like a way to also persist the layout of the form as well.

I am not looking for anything too detailed. Mainly just thoughts and suggestions.

Thank you

Answers


Here's how I've done something similar in the past using the .sortable() method. Use jQuery to keep track of the data that has been rearranged. Ajax the order to a database field, which can then be recalled at a later time. The database field would end up with something like "42,12,6,4"

function saveSortChanges () {
        var qString = $("#sortable").sortable("serialize"); // this should produce something like 'artOrder[]=5&artOrder[]=27&artOrder[]=3

        $.ajax({
            type: 'get',
            url: 'ajax.php',
            data: qString,
            success: function(txt) { }
        });

    }

    $("#sortable").sortable({ 
        cursor: 'move',
        update: function(event,ui) {
            saveSortChanges();
        }
    });

and the html is like

<div id="sortable">
<div class="editindex" id="artOrder_22"><!--stuff--></div>
<div class="editindex" id="artOrder_12"><!--stuff--></div>
<div class="editindex" id="artOrder_4"><!--stuff--></div>
</div>

Need Your Help

golang action on specific days of the week (ie. every Friday)

mysql time go

I need to get a specific day of the week inbetween a period such as for every sunday between 2015-08-17 to 2015-10-14 so I've end up with this.