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附带原始
使用“stack”参数
修改z-index
使用追加

我不知道出了什么问题，我不仅可以将我放入可放置容器的div放入，但我可以同时使用...

由于

Answer 1

找到答案：

除了$(this).append(droppedItem);或$(this).append(droppedItem).draggable();，您应该放置$(this).append(droppedItem.draggable());，否则整个项目将被视为可拖动。

可拖动一个可放置的元素

1 个答案: