如何使表单设计师

时间:2013-08-18 17:24:08

标签: html forms jquery-ui jquery-ui-sortable

手头的问题: 我想创建一个表单设计器,用户可以拖放不同类型的字段并设计布局,有些类似于wufoo form builder,但这里布局仅限于单列,而我想做一些用户可以做的事情根据需要制作布局。

我理解如何在单列视图中做,但无法理解如何实现多列布局,例如:第1行可能有3个元素,第2行一个元素拉伸到全长,第3行可能只有2个元素等。

我尝试了什么: 我已尝试使用jquery UI进行排序,使用div进行单列布局,可以拖动和重新定位新元素。

任何有关如何进一步行动的建议都会有所帮助

我尝试过搜索StackOverFlow和Google,但找不到类似主题的任何链接。如果有人能指出我这一点,它也会有所帮助。

1 个答案:

答案 0 :(得分:0)

当您对 wufoo表单构建器上的元素重新排序时,您只能向上或向下拖动。删除该限制,只要一个元素被拖过某个阈值,它就“属于”下一列。如果“旧”列是第一个或最后一个,并且元素被移动到的行是表单的“外部”,则在那里添加一个新列,直到达到最大列数。

如果使用的是将列的最后一个元素拖到另一列中,请删除element-drop上现在为空的列。

你也可以删除动态添加/删除列,juist有一个按钮(“删除列”和“添加列”)来按代码执行。

可以在此处找到另一列中删除的示例:http://jqueryui.com/sortable/#connect-lists

希望这有帮助!

编辑: http://jqueryui.com/sortable/#portletshttp://jqueryui.com/sortable/#empty-lists也有您可以查看的元素。祝好运!听起来像一个不错的项目。我们可以看到任何进展或测试版吗?