0

简单的 php/mysql/js 项目需要我让用户能够自定义一些表单。所以我写了这个页面，这样用户就可以编辑默认表单，添加自己的输入并拖动它们以根据需要排列它们。

现在我的问题是如何保存最终结果？我应该将每个输入的样式输入 mysql 吗？或者我应该提取所有输入的所有 css 并将它们作为文本保存到 mysql 中？

有任何想法吗 ？

小提琴示例

这是我的代码html

<h1>Form editer</h1>
<div id='form' style="position:relative;width:100%;border:1px dashed grey"></div>
<div id="generator">
   <label for="label">label</label><input type="text" value="" name="label">
   <label for="system">System name</label><input type="text" value="" name="system">
   <label for="type">input type</label><select name="type">
   <option value="input">input</option><option value="dropdown">dropdown</option</select>
   <label for="value">value</label><input type="text" value="" name="value">
   <button type="button" name="generate">generate</button>
   <div style="border:1px solid;width:250px;height:50px;margin: 0 auto;" id="tempo"></div>
   <button id="add_2_form" type="button" name="add to form">add to form</button>
</div>

Js（插件：jquery，可拖动）

$('button[name="generate"]').click(function(){
    var html,
    label=$('#generator input[name=label]').val(),
    sys=$('#generator input[name=system]').val(),
    type=$('#generator [name=type]').val(),
    value=$('#generator input[name=value]').val(),x;

    if(type == 'dropdown'){
        html='<label for="'+sys+'">'+label+'</label><select name="'+sys+'">';
        arr=value.split(",");
        for (x in arr)
        {
        html=html+'<option value="'+arr[x]+'">'+arr[x]+'</option>';
        }
        html=html+'</select>';
        $('#tempo').html(html);
    }else{
        html='<label for="'+sys+'">'+label+'</label><input type="'+type+'" name="'+sys+'" value="'+value+'">';
        $('#tempo').html(html);
    }
});
$('#add_2_form').click(function(){
var html='<p>'+$('#tempo').html()+'</p>';
    $('#form').append(html);
    $('#form p').css('border','1px dashed blue').draggable();
});

在此处输入图像描述

到目前为止，这是我的代码，但是现在如何在用户创建表单并拖动所有输入后保存表单？

4

1 回答 1

0

您必须构建自己的定位机制并将它们保存在会话或 cookie（使用 PHP）或本地存储（使用 JavaScript）中。在用户第二次访问此页面时，检查旧设置是否存在并通过设置位置以适合您保存的内容来恢复 UI。

我认为最简单的机制是存储元素name（或id）及其top, left, ... 值。

于 2013-01-19T13:22:52.487 回答