Javascript 使动态创建的div可拖放

我正在创建一个动态表单，用户可以在其中拖放字段。作为字段的一部分，我有一个剖面面板，它也是动态创建的。该部分的思想是对字段进行分组。我的问题是我无法在节上放置元素。这是我到目前为止所拥有的

HTML

---

A以上内容（包括css和完整的html）将非常有用。您的代码对拖动的项目没有任何作用。在
.panel body
droppable
事件中，您将向其中包含的
p
追加一个空字符串。您需要将html替换为
$（ui.draggable）
 <div class="row" id="droppable"></div

$(function() {
  $(".btn-call-type-div").draggable({
    cancel: false,
    refreshPositions: true,
    revert: true
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      var dragged_element = $(ui.draggable).attr('id');
      var html = "";
      switch (dragged_element) {
        case 'section':

          html = '<div class="panel panel-flat">' +
            '<div class="panel-heading">' +
            '<h6 class="panel-title"><input type="text" placeholder="Section title", class="form-control" name="section[]" required></h6>' +
            '</div>' +
            '<div class="panel-body">' +
            '<p class="panel-section">Drag section fields here</p>' +
            '</div>' +
            '</div>';
          break;
      }
      $("#section-paragraph").append(html);

    }
  });

  $(".panel-body").droppable({
    drop: function(event, ui) {
      var dragged_element = $(ui.draggable).attr('id');
      alert(dragged_element);
      var html = "";
      switch (dragged_element) {
        case 'select':
          //do something here when a select is dropped
          break;
        case 'checkbox':
          //do something here when a checkbox is dropped
          break;
        case 'textarea':
          //do something here when a textarea is dropped
          break;
        case 'text':
          //do something here when a text is dropped
          break;
      }
      $(this).find("p").append(html);
      $(this).css("height", "100%");
    }

  });
});