如何在HTML拖拽功能中设置自定义HTML元素数据？

这问题我之前踩过坑！核心原因是dataTransfer.setData()只能存储字符串类型的数据，你直接传DOM元素肯定拿不到，JSON.stringify()也没用——因为DOM对象包含大量循环引用和浏览器内部属性，根本没法被序列化成有效的JSON字符串。

给你两个可行的实现方案：

方案1：通过元素的唯一标识符传递（最简单） #

如果你的目标元素有唯一ID，或者可以给它加一个临时ID，这是最直接的方式：

// 拖拽开始时
element.addEventListener('dragstart', event => {
  // 给目标元素加个唯一ID（如果没有的话）
  const targetElement = document.querySelector('.the-element');
  if (!targetElement.id) {
    targetElement.id = `temp-drag-${Date.now()}`;
  }
  // 存储元素的ID
  event.dataTransfer.setData('custom-data', targetElement.id);
});

// 拖拽放下时
dropzone.addEventListener('drop', event => {
  event.preventDefault(); // 必须阻止默认行为，否则浏览器会触发默认的drop动作
  const elementId = event.dataTransfer.getData('custom-data');
  const targetElement = document.getElementById(elementId);
  // 拿到元素后可以做你需要的操作
  console.log(targetElement);
  // 可选：用完后移除临时ID
  targetElement.removeAttribute('id');
});

// 别忘了给dropzone加dragover事件，阻止默认行为才能触发drop
dropzone.addEventListener('dragover', event => {
  event.preventDefault();
});

方案2：用WeakMap关联元素与临时键（适合无ID场景） #

如果元素不能加ID，或者你不想修改元素属性，可以用WeakMap来存储元素，传递一个唯一的键：

// 全局（或模块级）创建一个WeakMap，用来临时存拖拽的元素
const dragElements = new WeakMap();
// 生成唯一键的工具函数
function generateUniqueKey() {
  return `drag-key-${Math.random().toString(36).slice(2)}`;
}

element.addEventListener('dragstart', event => {
  const targetElement = document.querySelector('.the-element');
  const key = generateUniqueKey();
  // 把元素存在WeakMap里
  dragElements.set(key, targetElement);
  // 传递这个键
  event.dataTransfer.setData('custom-data', key);
});

dropzone.addEventListener('drop', event => {
  event.preventDefault();
  const key = event.dataTransfer.getData('custom-data');
  const targetElement = dragElements.get(key);
  if (targetElement) {
    console.log(targetElement);
    // 用完后从WeakMap移除，避免内存泄漏（WeakMap本身也会在元素被销毁时自动清理）
    dragElements.delete(key);
  }
});

dropzone.addEventListener('dragover', event => {
  event.preventDefault();
});

关键注意点 #

• 一定要在dragover事件里调用event.preventDefault()，否则浏览器不会触发drop事件。
• WeakMap相比普通对象更适合存DOM元素，因为当元素被从DOM移除后，WeakMap会自动释放对应的内存，不会造成泄漏。

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