Jquery将表单元素拖放到div

Question

我正在尝试使用Jquery UI构建拖放表单构建器，我已经实现了以下代码，在此代码中用户将表单组拖到演示区域，现在它将附加到demo div， 它适用于第一个元素（输入）从那时起附加随机区域

如果我尝试拖动按钮，则根本不会附加。

我希望仅使用Jquery UI实现类似于http://bootsnipp.com/forms

如何修复问题，我的代码中出现了什么问题

<div class="row">
    <div class="col-md-3" id="catalog">
        <div class="form-group">
            <label class="col-md-2 control-label">Input Text</label>
            <div class="col-md-10">
                <input class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Submit" class="btn btn-default" />
            </div>
        </div>

    </div>
    <div class="col-md-6">
        <div class="demo" style="width: 600px; height: 400px; background-color: red">
            <label class="placeholder">Drag Elements in this area to build form</label>
        </div>
    </div>
    <div class="col-md-3">
        <div class="configuration">
        </div>
    </div>
</div>




@section scripts {
     <script>
         $(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");
                 }
             });

         });
     </script>
}