Web应用本地图片上传后拖拽重排功能实现求助——使用jQuery与JavaScript调试未果

Hey there! I see you've got the image upload preview working, but you're stuck on adding drag-and-drop reordering. The issue with your current code is that you've marked the image containers as draggable, but haven't implemented the event handlers needed to handle the drag, hover, and drop actions. Let's fix that together.

First, let's restructure your code to be cleaner, then add the drag-and-drop logic step by step.

Updated HTML #

Your existing container is fine, but I'll include the file input (since it was missing in your snippet—assuming you have it in your actual code!):

<input type="file" id="files" multiple accept="image/*">
<div id="result"></div>

Updated CSS #

Let's add styles to give clear visual feedback during dragging:

#result {
  display: flex;
  background-color: yellow;
  margin-top: 10px;
  margin-left: 0;
  height: 65px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px;
}

.thumbnail {
  height: 60px;
  width: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.image_div {
  width: 60px;
  height: 60px;
  margin-left: 10px;
  flex-shrink: 0;
  overflow-y: hidden;
  cursor: grab;
}

.image_div.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.image_div.drag-over {
  border: 2px dashed #333;
  border-radius: 6px;
}

Updated JavaScript #

Here's the full code with drag-and-drop reordering fully implemented:

// Track the element being dragged
let draggedElement = null;

document.querySelector("#files").addEventListener("change", (e) => {
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    const files = e.target.files;
    const output = document.querySelector("#result");

    for (let i = 0; i < files.length; i++) {
      if (!files[i].type.match("image")) continue;
      
      const picReader = new FileReader();
      picReader.addEventListener("load", function (event) {
        const picFile = event.target;
        const imageDiv = createImageDiv(picFile.result, picFile.name);
        output.appendChild(imageDiv);
        addDragHandlers(imageDiv);
      });
      picReader.readAsDataURL(files[i]);
    }
  } else {
    alert("Your browser does not support File API");
  }
});

// Helper to create image container elements
function createImageDiv(src, title) {
  const div = document.createElement("div");
  div.setAttribute("draggable", "true");
  div.className = "image_div";
  div.innerHTML = `<img class="thumbnail" src="${src}" title="${title}"/>`;
  return div;
}

// Add drag-and-drop functionality to each image container
function addDragHandlers(element) {
  // Triggered when dragging starts
  element.addEventListener("dragstart", (e) => {
    draggedElement = element;
    element.classList.add("dragging");
    // Required for cross-browser compatibility
    e.dataTransfer.setData("text/plain", element.innerHTML);
  });

  // Clean up styles when dragging ends
  element.addEventListener("dragend", () => {
    draggedElement.classList.remove("dragging");
    draggedElement = null;
    document.querySelectorAll(".drag-over").forEach(el => el.classList.remove("drag-over"));
  });

  // Allow drop and show hover feedback
  element.addEventListener("dragover", (e) => {
    e.preventDefault(); // Critical to enable dropping
    if (draggedElement !== element) {
      element.classList.add("drag-over");
    }
  });

  // Remove hover feedback when drag leaves
  element.addEventListener("dragleave", () => {
    element.classList.remove("drag-over");
  });

  // Handle the drop to reorder elements
  element.addEventListener("drop", (e) => {
    e.preventDefault();
    element.classList.remove("drag-over");
    
    if (draggedElement && draggedElement !== element) {
      const parent = document.querySelector("#result");
      // Insert the dragged element before the target element
      parent.insertBefore(draggedElement, element);
    }
  });
}

Key Changes Explained: #

• Organized Helpers: Split code into createImageDiv and addDragHandlers to keep it readable and reusable.
• Drag Event Logic:
  • dragstart: Marks the active dragged element and adds a semi-transparent style.
  • dragover: Blocks default browser behavior (which blocks dropping) and adds a dashed border to indicate valid drop zones.
  • drop: Handles reordering by inserting the dragged element before the target container.
  • dragend: Cleans up all temporary styles after the drag completes.
• User Feedback: Added CSS classes for dragging and hover states to make the action intuitive for users.

Test this out—you should now be able to drag any uploaded image thumbnail to reorder them in the flex container seamlessly!

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