需要一个交换元素的函数

Question

function swap(ev, targetId) {
  //Working on a school project and got stuck, was trying to swap .gif like drag and drop
  const currentId = ev.dataTransfer.getData("text");
  const current = document.getElementById(currentId);
  const currentParent = current.parentNode;
  const target = document.getElementById(targetId);
  const targetParent = target.parentNode;

  if (currentParent === targetParent) {
    const currentIndex = Array.from(currentParent.children).indexOf(current);
    const targetIndex = Array.from(currentParent.children).indexOf(target);

    if (currentIndex !== -1 && targetIndex !== -1) {
      currentParent.insertBefore(target, current);
      currentParent.insertBefore(current, target.nextSibling);
    }
  } else {
    const clonedImage = current.cloneNode(true);
    targetParent.insertBefore(clonedImage, target);
    currentParent.removeChild(current);
  }
}

<div id="dropzone1" class="dropzone" ondrop="swap(event, 'dropzone1')" ondragover="allowDrop(event)">
  <img 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, 'dropzone2')" ondragover="allowDrop(event)">
  <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExemMyNTMzaGdlN2U5OWRmZXkwZHYwcWdhcTc2ZzZ0MzJrdnRoMGZtayZlcD12MV9naWZzX3NlYXJjaCZjdD1n/l0HlO4V8iCRME3i0g/giphy.webp" alt="Planet" draggable="true" ondragstart="drag(event)" width="100%" height="100%">
</div>

Answer 1

用于交换 GIF 的拖放功能已步入正轨。它通过 ID 识别拖动的项目和目标项目，熟练地处理拖放的基本逻辑。以下是简化的解释和更好处理的增强：

核心逻辑：

识别元素：它捕获拖动的和目标项目的ID，使用它们来访问相应的DOM元素及其父节点。

在同一父项内交换：当两个项目共享同一父项时，它会计算它们的位置并通过调整它们在 DOM 中的顺序来交换它们。

处理不同的父项：对于具有不同父项的项目，它会克隆拖动的项目，将克隆项放置在新位置，并将原始项从其初始位置删除。

增强功能:

function swap(ev, targetId) {
    const currentId = ev.dataTransfer.getData("text");
    const current = document.getElementById(currentId);
    const target = document.getElementById(targetId);

    if (!current || !target) return;

    const currentParent = current.parentNode;
    const targetParent = target.parentNode;

    if (currentParent === targetParent) {
        targetParent.insertBefore(current, current.nextSibling === target ? target : target.nextSibling);
        targetParent.insertBefore(target, current);
    } else {
        const clonedImage = current.cloneNode(true);
        targetParent.insertBefore(clonedImage, target);
        currentParent.removeChild(current);
    }
}

主要改进：

验证检查：在继续之前确保拖动的元素和目标元素都有效。 优化交换：简化同一父级内的交换逻辑，以提高清晰度和效率。

实施技巧： 确保正确设置拖放事件侦听器和元素上的draggable 属性。 为可拖动元素分配唯一的 ID，以便于识别。