如何将已放置的拖拽元素放回原容器？附现有jQuery代码

我来给你梳理下具体的实现思路和代码调整，你可以基于现有代码修改：

1. 初始化时保存每个卡片的原始容器引用 #

首先，在初始化拖拽元素的时候，给每个卡片添加一个data属性，记录它的原始父容器。这样后续拖拽时就能明确知道该放回哪里：

var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
numbers.forEach(function(num) {
  var $card = $('#card' + num);
  // 保存原始容器的DOM引用
  $card.data('originalContainer', $card.parent());
  
  $card.data('number', num).draggable({
    containment: '#content',
    stack: '#cardPile div',
    cursor: 'move',
    // 把原始容器也加入吸附目标，提升交互体验
    snap: '#cardSlots, #cardPile',
    snapMode: 'inner',
    snapTolerance: 10,
    revert: function(dropped) {
      var $draggable = $(this);
      var hasBeenDroppedBefore = $draggable.data('hasBeenDropped');
      var targetIsSlots = dropped && dropped[0].id === 'cardSlots';
      var targetIsOriginal = dropped && dropped[0] === $draggable.data('originalContainer')[0];

      // 如果拖拽到的不是目标容器也不是原始容器，触发返回动画
      if (!dropped || (!targetIsSlots && !targetIsOriginal)) {
        return true;
      }

      // 如果放回了原始容器，重置已放置状态
      if (targetIsOriginal) {
        $draggable.data('hasBeenDropped', false);
      }

      return !targetIsSlots;
    }
  });
});

2. 将原始容器设置为可放置区域 #

接下来，把存放卡片的原始容器（比如你的#cardPile）设置成droppable，这样它就能接收被拖拽回来的卡片：

// 配置原始容器为可放置区域
$('#cardPile').droppable({
  // 接受来自自身和目标容器的卡片
  accept: '#cardPile div, #cardSlots div',
  drop: function(event, ui) {
    var $draggable = ui.draggable;
    // 将卡片放回它的原始容器
    $draggable.appendTo($draggable.data('originalContainer'));
    // 重置卡片的已放置状态，方便后续再次拖拽到目标容器
    $draggable.data('hasBeenDropped', false);
  }
});

关键逻辑说明 #

• 保存原始容器：通过data('originalContainer')记录每个卡片的初始父元素，避免硬编码容器选择器，提升代码灵活性。
• 调整revert逻辑：让卡片只有在拖拽到非目标/非原始容器时才返回原位，放回原始容器时直接放置并重置状态。
• 原始容器设为droppable：确保卡片能被正确放回原始容器，同时处理状态重置，不影响后续的拖拽操作。

如果你的目标容器（#cardSlots）已有对应的droppable配置，保持它的逻辑不变即可，这样就能同时支持「拖到目标容器」和「拖回原始容器」两个功能啦。

内容的提问来源于stack exchange，提问作者Apurva