need an function swap for swaping elements

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

Your drag-and-drop function for swapping GIFs is on the right track. It adeptly handles the basic logic for dragging and dropping by identifying the dragged and target items through their IDs. Here's a streamlined explanation and an enhancement for better handling:

Core Logic:

Identifying Elements: It captures the IDs of the dragged and target items, using them to access the corresponding DOM elements and their parent nodes.

Swapping within the Same Parent: When both items share the same parent, it calculates their positions and swaps them by adjusting their order in the DOM.

Handling Different Parents: For items with different parents, it clones the dragged item, places the clone in the new location, and removes the original from its initial position.

Enhanced Function:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id); // This now has a valid ID
}

function swap(ev, dropzoneId) {
    ev.preventDefault(); // Prevent the default behavior
    const currentId = ev.dataTransfer.getData("text");
    const targetDropzone = document.getElementById(dropzoneId);
    const targetImg = targetDropzone.querySelector('img'); // Get the image inside the dropzone

    if (!currentId || !targetImg) return; // Check if IDs are retrieved correctly and targetImg exists

    // Assuming you want to swap the images between dropzones
    const currentImg = document.getElementById(currentId);
    const currentParent = currentImg.parentNode;

    // Swap logic
    currentParent.appendChild(targetImg);
    targetDropzone.appendChild(currentImg);
}

function allowDrop(ev) {
    ev.preventDefault(); // This allows the drop by preventing the default handling of the element
}

<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>

Key Improvements:

Validation Check: Ensures both the dragged and target elements are valid before proceeding. Optimized Swapping: Streamlines the swapping logic within the same parent for clarity and efficiency.

Implementation Tips: Ensure proper setup of drag-and-drop event listeners and the draggable attribute on your elements. Assign unique IDs to draggable elements to facilitate their identification.