如何将 jQuery 的拖拽事件正确迁移到原生 JavaScript

本文详解 jquery 拒拽事件（如 dragover、dragleave）迁移到 vanilla js 时的关键差异，重点指出 `e.originalevent.datatransfer` 是 jquery 特有写法，原生 js 应直接使用 `e.datatransfer`，并提供可直接运行的修复代码与最佳实践。

在将基于 jQuery 的拖拽上传逻辑迁移至原生 JavaScript 时，一个常见却隐蔽的错误是误用事件对象属性。jQuery 会对原生事件进行封装，其 event.originalEvent 属性用于回溯浏览器原始事件对象；而 Vanilla JS 中，事件回调函数接收到的 e 就是标准原生事件对象，dataTransfer 等拖拽相关属性已直接挂载其上，无需通过 .originalEvent 访问。

例如，你原代码中这一行：

let dt = e.originalEvent.dataTransfer; // ❌ 错误：Vanilla JS 中不存在 originalEvent

应修正为：

let dt = e.dataTransfer; // ✅ 正确：原生事件对象直接暴露 dataTransfer

此外，还需注意以下关键点以确保拖拽行为正常工作：

• 必须调用 e.preventDefault()：在 dragover 事件中阻止默认行为（否则浏览器会尝试打开或导航到拖入的文件），这是启用拖拽反馈（如 drop 事件触发）的前提。
• dragstart 中需设置数据类型：虽然本例仅作视觉提示，但若后续需支持真正拖放（如拖动元素），setData() 调用是必需的；同时注意参数名应为 "text/plain" 或 "Files" 等标准类型（"image" 非标准，建议按需调整）。
• 防抖逻辑保持一致：dragleave 的定时器防抖（25ms）用于避免因鼠标短暂划过子元素导致误判离开，该逻辑在原生中完全适用。

以下是完整、可直接部署的 Vanilla JS 替代方案：

let dragTimer;

// 注意：此处 dragstart 仅作示例；实际文件拖拽通常由用户从系统拖入，无需主动触发 dragstart
document.addEventListener("dragstart", function (e) {
  e.dataTransfer.setData("text/plain", e.target.id); // 使用标准 MIME 类型
});

document.addEventListener("dragover", function (e) {
  e.preventDefault(); // ⚠️ 必须！否则 dragleave/drop 不会触发
  const dt = e.dataTransfer;

  // 检查是否包含文件类型（兼容旧版 IE）
  const hasFiles = dt.types && (
    dt.types.indexOf ? dt.types.indexOf("Files") !== -1 : dt.types.contains("Files")
  );

  if (hasFiles) {
    document.querySelector(".image-upload-wrap").classList.add("image-dropping");
    clearTimeout(dragTimer); // 使用标准 clearTimeout，非 window.clearTimeout
  }
});

document.addEventListener("dragleave", function (e) {
  e.preventDefault();
  dragTimer = setTimeout(() => {
    document.querySelector(".image-upload-wrap").classList.remove("image-dropping");
  }, 25);
});

// 别忘了处理 drop 事件（实际读取文件）
document.addEventListener("drop", function (e) {
  e.preventDefault();
  const dt = e.dataTransfer;
  const files = dt.files;

  if (files && files[0]) {
    const reader = new FileReader();
    reader.onload = function (ev) {
      document.getElementById("list-image").src = ev.target.result;
      document.querySelector(".image-upload-wrap").classList.remove("image-dropping");
    };
    reader.readAsDataURL(files[0]);
  }
});

✅ 总结与建议：

• 原生 JS 拖拽 API 更轻量，但要求开发者严格遵循规范（如 preventDefault()）；
• 浏览器兼容性方面，现代浏览器（Chrome/Firefox/Safari/Edge ≥ 79）对 dataTransfer.types 和 files 支持良好；若需支持旧版 IE，建议保留 jQuery 或添加 polyfill；
• 开发时可借助 console.log(e.dataTransfer) 快速验证数据对象结构，避免依赖 jQuery 文档惯性思维。

迁移不是简单替换语法，而是理解事件模型本质——掌握这一点，才能写出健壮、可维护的原生拖拽逻辑。