Jquery 可拖放的位于可拖放元素内部的元素

我有一个可拖动的元素，我把它放在我的Dropables容器中，我想把它拖回去。如果它是从可放下的容器中取出的，我想销毁它

下面是一个演示：

这是我的jQuery代码：

    $('.spell').draggable({
  helper: 'clone',
  scope: 'drop',
  revert: 'invalid'
});
$('.spell-receiver').droppable({
  accept: '.spell',
  scope: 'drop',
  hoverClass: 'spell-receiver-border',
  drop: function(ev, ui) {
    $(this).empty();
    if ($(this).find('.spell').length === 0) {
      var droppedItem = $(ui.draggable).clone();
      $(this).append(droppedItem);
    }
  }
});

和我的HTML代码：

    <div class="stats-category">
  <div class="stats-content">
    <div class="spell ui-draggable ui-draggable-handle"></div>
    <div class="spell ui-draggable ui-draggable-handle"></div>
    <div class="spell ui-draggable ui-draggable-handle"></div>
    <div class="spell ui-draggable ui-draggable-handle"></div>
  </div>
  <div class="stats-header">Section 1</div>
  <div class="stats-content">
    <div class="spell-receiver ui-droppable"></div>
    <div class="spell-receiver ui-droppable"></div>
    <div class="spell-receiver ui-droppable"></div>
    <div class="spell-receiver ui-droppable"></div>
  </div>
  <div class="stats-header">Section 2</div>
  <div class="stats-content">
  </div>
</div>

第一节
第二节

我已经试过：

• 在末尾添加draggable（）事件，但第一个div与原始div一起出现
• 使用“stack”参数
• 修改z索引
• 使用附加

我不知道出了什么问题，我不能只拿我放在可放下容器中的div，但我可以拿两个

谢谢

找到答案：

而不是

$（this）.append（droppedItem）

或

$（this）.append（droppedItem）.draggable（）

您应该放置

$（this.append（droppedItem.draggable（））否则整个项目将被视为可拖动