title: JQuery draggable form builder
body: <p>I am trying to make something similar to <a href="http://www.edigitsoftware.com//formbuilder-v2/edit.php?id=5364" rel="nofollow">this</a></p>
  
  <p>At the moment, I have made a little progress.  I have made a sidebar which will list different form elements, and I have made it so these can be dragged and dropped onto what will be the form container.</p>
  
  <p>So far, this is what it looks like
  <a href="https://jsfiddle.net/L2u1Lhyy/" rel="nofollow">Fiddle</a></p>
  
  <p>This is what I am trying to achieve but having difficulty with.  At the moment, I simply display elements like this</p>
  
  <pre><code>&lt;li class="list-group-item draggable"&gt;&lt;span class="fm-textbox-icon"&gt;&lt;/span&gt;Text Box&lt;/li&gt;
  </code></pre>
  
  <p>So it does not contain any form code.  Therefore, when I drag it onto my form container, I do not really want to use clone.  Instead, if it is a Text Box they drag over, it should create the following</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="col-sm-5 control-label green" for="fieldName"&gt;Field Label:&lt;/label&gt;
      &lt;div class="col-sm-7"&gt;
          &lt;input id="fieldName" class="form-control" type="text" name="fieldName"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This means I would somehow need to add some field properties to the dragged form element (label, size etc) , like what is seen in the first example I have shown.  I have looked at the code in the first example, and there is a lot of it.</p>
  
  <p>Is there any way I can simplify this process?  I am essentially looking to build what is in the example, just on a way smaller scale.</p>
  
  <p>Any advice in helping me achieve this is greatly appreciated.</p>
  
  <p>Many thanks </p>