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

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>

The easiest and most secure way to do this would be via jQuery or another JavaScript library. Check out jQuery UI and YUI. Both feature widgets which allow repositioning, resizing, and other customizations. It grows more complicated if you want to make the user's changes persistent, however.

Do you have a login system? If so, I guess you need to have a separate table where you store user preferences in the database.

Else you can use cookies or SESSION variables as per your needs.

A clean way is to have separate CSS files, and just store the css file ID/name in your session variable (or db table). Let the main HTML that you emit remain the same, just change the css rel link (dont use inline css).

There is a way to have CSS with parameters (I forgot the technical term), but apparently IE has stopped supporting from IE9 onwards, so it might not be very cross browser compatible.

JP19 had very good general advice.

What are using for your back-end? If you are using ASP.NET, because they have Personalization and Themes that are specifically designed specifically for this purpose. It may be worthwhile to examine Personalization as well as ASP.NET WebParts to get an idea of how to implement this.

Take a look at DropThings. It might have what you are looking for.

I think layout is mainly about some css attributes, like width, height, position, float, margin, padding, etc. you can let the user edit these attributes and stores them with the input object in your persist layer.