Chrome浏览器中Drag and Drop功能异常问题排查

问题现象 #

实现的拖拽上传功能在Firefox中运行完全正常，但在Chrome中拖拽文件到指定区域时，加号光标仅偶尔显示，drop操作难以触发。

原因分析 #

• Chrome对dragover事件的识别逻辑更严格，仅调用e.preventDefault()不足以让浏览器判定当前区域为有效放置目标。
• 未显式设置拖拽区域的光标样式，Chrome不会自动为可放置区域添加加号类的提示光标。
• 事件冒泡可能干扰Chrome的默认拖拽行为，导致浏览器无法正确识别放置区域。

解决方案 #

1. 完善dragover事件处理：在dragover事件中同时调用e.preventDefault()和e.stopPropagation()，并返回false，确保Chrome能正确识别有效放置区域。
2. 添加光标样式：给.drop_zone和.drop_zone__over类添加cursor: copy样式，明确提示用户当前区域可放置文件。

修正后的完整代码 #

HTML #

<div class="drop_zone">
  <span class="drop_zone_prompt">Drag and drop your file here</span>
  <input type="file" name="myFile" class="drop_zone__input">
</div>

CSS #

.drop_zone {
  margin-left: 450px;
  max-width: 200px;
  height: 200px;
  padding: 25px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  /* 添加Chrome专属光标提示 */
  cursor: copy;
  color: #cccccc;
  border: 4px dashed rgb(217, 51, 51);
  border-radius: 15px;
}

.drop_zone__over {
  border-style: solid;
  /* 悬停时保持光标样式 */
  cursor: copy;
}

.drop_zone__input {
  display: none;
}

.drop_zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.drop_zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: #000;
  font-size: 14px;
  text-align: center;
}

JavaScript #

document.querySelectorAll(".drop_zone__input").forEach(inputElement => {
  const dropzoneElement = inputElement.closest(".drop_zone");

  dropzoneElement.addEventListener("click", e => {
    inputElement.click();
  });

  inputElement.addEventListener("change", e => {
    if (inputElement.files.length) {
      updateThumbnail(dropzoneElement, inputElement.files[0]);
    }
  });

  dropzoneElement.addEventListener("dragover", e => {
    e.preventDefault();
    // 添加stopPropagation阻止事件冒泡
    e.stopPropagation();
    dropzoneElement.classList.add("drop_zone__over");
    // 返回false确保Chrome正确识别
    return false;
  });

  ["dragleave", "dragend"].forEach(type => {
    dropzoneElement.addEventListener(type, e => {
      dropzoneElement.classList.remove("drop_zone__over");
    });
  });

  dropzoneElement.addEventListener("drop", e => {
    e.preventDefault();
    e.stopPropagation();

    if (e.dataTransfer.files.length) {
      inputElement.files = e.dataTransfer.files;
      updateThumbnail(dropzoneElement, e.dataTransfer.files[0]);
    }

    dropzoneElement.classList.remove("drop_zone__over");
  });

});

/**
* @param {HTMLElement} dropzoneElement
* @param {File} file
*/
function updateThumbnail(dropzoneElement, file) {
  let thumbnailElement = dropzoneElement.querySelector(".drop_zone__thumb");

  console.log(file);

  if (dropzoneElement.querySelector(".drop_zone_prompt")) {
    dropzoneElement.querySelector(".drop_zone_prompt").remove();
  }

  if (!thumbnailElement) {
    thumbnailElement = document.createElement("div");
    thumbnailElement.classList.add("drop_zone__thumb");
    dropzoneElement.appendChild(thumbnailElement);
  }

  thumbnailElement.dataset.label = file.name;

  if (file.type.startsWith("image/")) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
    };
  } else {
    thumbnailElement.style.backgroundImage = null;
  }
}

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