A simple Form Builder using jQueryUI

In this post, we will see how to implement jQuery and jQueryUI to create the first part of form builder. In this part, the form builder will be used to place fields in a column layout – specifically a two column layout.

Demo / Source-code here

    &lt;!-- droppable columns defined below--&gt;
    &lt;td class="droppedFieldsColumn"&gt;
        &lt;div id="selected-column-1" class="droppedFields"&gt;&lt;/div&gt;
    &lt;/td&gt;
    &lt;td class="droppedFieldsColumn" &gt;
        &lt;div id="selected-column-2" class="droppedFields"&gt;&lt;/div&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tfoot&gt;
    &lt;tr align="left"&gt;
        &lt;td colspan="3"&gt;
            &lt;input type="button" value="Preview" onclick="preview();"&gt;&lt;/input&gt;
        &lt;/td&gt;
    &lt;tr&gt;
&lt;/tfoot&gt;

</table>

$(".fld").draggable({ helper: “clone”, stack: “#containerTable div”,cursor: “move” });

The “accept” option defines what draggable elements are allowed to be dropped in the column-DIVs. Applying “:not(.ui-sortable-helper)” prevents the drop when sorting the elements within the column-DIV. The elements are made sortable with the following lines:

Demo / Source-code here

Next>> Form Builder Part 2

Anup Shinde

A simple Form Builder using jQueryUI - Part 1