html - 允许用户更改网页布局

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>