如何实现将已放入Droppable容器的Draggable元素拖回并在移出时销毁？

嘿，我帮你梳理下实现思路和代码，刚好能满足你要的「拖入容器的元素可拖回，且拖出容器时自动销毁」的需求～

1. 先保留原.spell元素的克隆拖拽功能，确保能把克隆体拖进.spell-receiver容器；
2. 当元素拖入容器后，得给这个克隆出来的元素再绑定拖拽事件，这样它才能被再次拖动；
3. 在新的拖拽逻辑里，判断元素是否被拖出了容器，一旦拖出去就直接销毁它。

// 原spell元素的拖拽配置，保持克隆模式，未拖入有效容器时自动返回
$('.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(); // 先清空容器，确保每次只留当前拖入的元素
    
    // 克隆拖拽时的临时元素，移除拖拽中的临时类，添加到容器里
    var draggedSpell = ui.helper.clone()
      .removeClass('ui-draggable-dragging')
      .appendTo($(this));
    
    // 给容器里的新元素绑定拖拽功能，处理拖出销毁逻辑
    draggedSpell.draggable({
      scope: 'drop',
      stop: function() {
        // 检查元素是否还在接收容器内，不在就销毁
        if (!$(this).closest('.spell-receiver').length) {
          $(this).remove();
        }
      }
    });
  }
});

• 克隆元素的处理：用ui.helper.clone()拿到拖拽时的克隆体后，要移除ui-draggable-dragging类——这是jQuery UI在拖拽过程中自动加的临时类，留着可能会导致样式或行为异常；
• 拖出销毁的判断：在新元素的拖拽stop事件里，用closest('.spell-receiver')检查它是否还在容器范围内，一旦不在就调用remove()销毁；
• 原元素的返回逻辑：原.spell元素保留revert: 'invalid'，确保如果没拖进有效容器，克隆体自动回到原位置，不会随便残留。

这样操作下来，你就能实现想要的效果啦～

内容的提问来源于stack exchange，提问作者Zeyukan Ich'