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

Posted 2023-05-08

【中文标题】可拖放元素内的可拖放元素

【英文标题】：Draggable an element which is inside a droppable one

【发布时间】：2018-09-29 06:28:21

【问题描述】：

我有一个可拖动的元素，我把它放在我的 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，但我可以同时取两者...

谢谢

【参考方案1】：

找到答案：

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