请求实现用于元素交换的swap函数（支持拖拽交换GIF）

问题分析 #

当前的swap函数存在两个核心问题：

• 跨容器拖拽时，仅克隆并移动了被拖拽元素，未完成双向交换（目标容器内的元素没有移到原容器）
• 同容器内的元素交换逻辑有误，insertBefore的调用顺序会导致元素位置混乱

修正后的完整代码 #

HTML 部分 #

给每个GIF图片添加唯一ID，确保拖拽时能准确识别元素：

<style>
.dropzone {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 2px dashed #ccc;
  margin: 10px;
}
.dropzone img {
  object-fit: cover;
}
</style>

<div id="dropzone1" class="dropzone" ondrop="swap(event, this.id)" ondragover="allowDrop(event)">
  <img id="gif1" src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExNmN2aWg1dnZsNHFxMWZrcDFiMmEzY3JhYmR0YjZwbHplczFseXRvNyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/iicDrNGWxHmDrIni6j/200.webp" alt="Galaxy" draggable="true" ondragstart="drag(event)" width="100%" height="100%">
</div>
<div id="dropzone2" class="dropzone" ondrop="swap(event, this.id)" ondragover="allowDrop(event)">
  <img id="gif2" src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExemMyNTMzaGdlN2U5OWRmZXkwZHYwcWdhcTc2ZzZ0MzJrdnRoMGZtayZlcD12MV9naWZzX3NlYXJjaCZjdD1n/l0HlO4V8iCRME3i0g/giphy.webp" alt="Planet" draggable="true" ondragstart="drag(event)" width="100%" height="100%">
</div>

JavaScript 部分 #

补充必要的drag、allowDrop函数，并修正swap的交换逻辑：

// 允许拖拽事件默认行为，确保drop事件能触发
function allowDrop(ev) {
  ev.preventDefault();
}

// 拖拽开始时存储被拖拽元素的ID
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

// 修正后的交换函数
function swap(ev, targetZoneId) {
  ev.preventDefault();
  
  const draggedId = ev.dataTransfer.getData("text");
  const draggedEl = document.getElementById(draggedId);
  const draggedParent = draggedEl.parentNode;
  const targetZone = document.getElementById(targetZoneId);
  const targetEl = targetZone.querySelector("img"); // 假设每个容器仅包含一个GIF

  // 同容器内拖拽（若每个容器只有一个元素，无需处理交换）
  if (draggedParent === targetZone) {
    return;
  }

  // 跨容器双向交换：互相替换位置
  draggedParent.appendChild(targetEl);
  targetZone.appendChild(draggedEl);
}

关键改进点 #

• 双向交换逻辑：跨容器时，将目标容器的GIF移到原容器，原GIF移到目标容器，真正实现交换效果
• 元素ID绑定：给每个GIF添加唯一ID，确保拖拽过程中能精准定位元素
• 简化同容器处理：针对单元素容器场景简化逻辑，若需支持多元素容器，可扩展索引判断调整元素位置
• 完善基础函数：补充drag和allowDrop，确保拖拽事件链正常触发

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