可拖放元素内的可拖放元素

Question

我有一个可拖动的元素，我把它放在我的 droppables 容器中，我想把它拖回来。如果它不在可放置容器中，我想销毁它。

这是一个演示：http://jsfiddle.net/xpvt214o/155466/

这是我的 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 是原始的
• 使用“堆栈”参数
• 修改 z-index
• 使用附加

我不知道出了什么问题，我不能只取我放在可放置容器中的 div，但我可以同时取两者...

谢谢

Answer 1

找到答案：

您应该输入$(this).append(droppedItem.draggable()); 而不是$(this).append(droppedItem); 或$(this).append(droppedItem).draggable();，否则整个项目将被视为可拖动。