允许用户更改网页布局

Question

我有一个网页,允许用户插入带有标签的表单输入对象.当他们添加一个新对象时,我会自动将它添加到一个2列表中,左列是标签,右边是表单控件.

我想让用户更好地控制页面的布局方式.我想知道是否有任何示例,模式或建议可以帮助我实现这一目标.我发现的唯一示例是在Liferay中,您可以在其中选择不同的布局模板,然后根据布局和顺序在该页面上定位portlet.

更新:

我想坚持他们设计的布局.

我已经将表单本身保留了下来.HTML没有持久化,我在请求表单时动态生成它.我想要一种方法来保持表单的布局.

我不是在寻找太详细的东西.主要是思想和建议.

谢谢

Answer 1

以下是我过去使用该.sortable()方法做过类似事情的方法.使用jQuery跟踪已重新排列的数据.Ajax订单到数据库字段,然后可以在以后调用.数据库字段最终会出现类似"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();
        }
    });

而html就像

<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>