Как создать конструктор формы

Question

Проблема в руке: Я хочу создать конструктор форм, где пользователь может перетаскивать поля различного типа и разрабатывать макет тоже, что-то похожее на wufoo form builder, но здесь макет ограничен в то время как я хочу сделать что-то, где пользователь может сделать макет по своему усмотрению.

Я понимаю, как это сделать в виде одного столбца, но не мог понять, как достичь множественного расположения столбцов, например: строка 1 может быть 3 элемента, строка 2 один элемент растянут до полной длины, строка 3 может быть всего 2 Элементы и т. д.

Что я пробовал: Я попытался с jQuery UI сортировать, чтобы сделать один макет столбца с помощью div, где новые элементы можно перетаскивать и перемещать.

Любое предложение о том, как действовать дальше будет полезно

Я попытался найти StackOverflow и Google, но не смог найти ссылку на аналогичную тему. Если кто-то может указать мне на то же самое, это также будет полезно.

Answer 1

При изменении порядка элементов на wufoo form builder вы можете только перетаскивать мышью вверх или вниз. Удалите это ограничение, и как только один элемент перетаскивается через определенный порог, он «принадлежит» следующему столбцу. Если «старый» столбец был первым или последним, а строка, над которой был перемещен элемент, была «вне» формы, добавьте туда новый столбец, пока не будет достигнуто максимальное количество столбцов.

Если используемый элемент перетаскивает последний элемент столбца в другой столбец, удалите теперь пустой столбец элемента-drop.

Вы также можете удалить динамическое добавление/удаление столбцов, а для кнопки со стрелкой - нажать кнопку («удалить столбец» & «добавить столбец»), чтобы сделать это по коду.

Пример для сбрасывания в другой колонке, можно найти здесь: http://jqueryui.com/sortable/#connect-lists

Надеется, что это помогло!

Редактировать: http://jqueryui.com/sortable/#portlets и http://jqueryui.com/sortable/#empty-lists также имеют элементы, которые вы могли бы изучить. Удачи! Похоже на хороший проект. Можем ли мы увидеть прогресс или бета?