title: Jquery Drag and drop form element to div
body: <p>I am trying to build drag and drop form builder with Jquery UI , I have achieved below code, in this code  user drag form-group into demo area , now it is appending to demo div , 
  It is working good for 1st element (input) to append from then it is appending random area </p>
  
  <p>If I try to drag Button , it is not appending at all.</p>
  
  <p>I want to achieve similar to <a href="http://bootsnipp.com/forms" rel="nofollow">http://bootsnipp.com/forms</a> with Jquery UI only</p>
  
  <p>How can I fix issues, what is wrong in my code </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-3" id="catalog"&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="col-md-2 control-label"&gt;Input Text&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;input class="form-control" type="text"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Submit" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="demo" style="width: 600px; height: 400px; background-color: red"&gt;
              &lt;label class="placeholder"&gt;Drag Elements in this area to build form&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;div class="configuration"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  @section scripts {
       &lt;script&gt;
           $(function () {
               $("#catalog .form-group").draggable({
                   appendTo: ".demo",
                   helper: "clone"
               });
               $(".demo").droppable({
                   accept: ":not(.ui-sortable-helper)",
                   drop: function (event, ui) {
                       $(this).find(".placeholder").remove();
                       $(".demo").append($(".form-group").html());
                   }
               }).sortable({
                   items: "div:not(.placeholder)",
                   sort: function () {
                       // gets added unintentionally by droppable interacting with sortable
                       // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                       $(this).removeClass("ui-state-default");
                   }
               });
  
           });
       &lt;/script&gt;
  }
  </code></pre>