Question

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

Answer 1

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>