如何在dragstart与dragenter事件间共享拖拽数据（跨iframe场景）

针对你的场景——同源iframe间拖拽、需在dragstart与dragenter间共享数据且数据绑定到拖拽事件本身，这里提供两种可行方案：

方案1：自定义MIME类型 + 同源postMessage传递数据 #

通过拖拽事件携带唯一标识，结合iframe间消息通信传递数据，完全贴合“数据属于拖拽事件本身”的要求：

拖拽源iframe代码 #

// 用Map存储当前拖拽的临时数据（仅在当前iframe内存中，无全局污染）
const dragDataStore = new Map();

draggableElement.addEventListener("dragstart", e => {
  // 生成唯一拖拽ID，绑定到当前拖拽事件
  const dragId = crypto.randomUUID();
  const customData = { content: "someCustomData", type: "custom-element" };

  // 存入DataTransfer，用于识别拖拽事件
  e.setData("application/x-myapp-drag-id", dragId);
  // 添加自定义类型标记，区分自家应用的拖拽
  e.setData("application/x-myapp-drag", "true");

  // 数据关联拖拽ID，存入临时存储
  dragDataStore.set(dragId, customData);

  // 监听目标iframe的数据请求
  const messageHandler = (msg) => {
    if (msg.data.type === "FETCH_DRAG_DATA" && msg.data.dragId === dragId) {
      // 返回对应数据给请求方
      msg.source.postMessage({
        type: "DRAG_DATA",
        dragId,
        data: customData
      }, window.origin);
      // 移除监听，避免内存泄漏
      window.removeEventListener("message", messageHandler);
    }
  };
  window.addEventListener("message", messageHandler);
});

// 拖拽结束后清理临时数据
draggableElement.addEventListener("dragend", e => {
  const dragId = e.dataTransfer.getData("application/x-myapp-drag-id");
  dragDataStore.delete(dragId);
});

目标iframe代码 #

dropzoneElement.addEventListener("dragenter", e => {
  e.preventDefault();
  // 过滤非自家应用的拖拽事件
  if (!e.dataTransfer.types.includes("application/x-myapp-drag")) return;

  // 发送数据请求到所有同源iframe
  window.top.postMessage({ type: "FETCH_DRAG_DATA" }, window.origin);

  // 监听拖拽源返回的数据
  const messageHandler = (msg) => {
    if (msg.data.type === "DRAG_DATA") {
      console.log("拖拽数据：", msg.data.data);
      // 执行dragenter阶段逻辑，比如修改dropzone样式
      dropzoneElement.classList.add("dragging-over");
      // 移除监听
      window.removeEventListener("message", messageHandler);
    }
  };
  window.addEventListener("message", messageHandler);
});

dropzoneElement.addEventListener("dragleave", e => {
  dropzoneElement.classList.remove("dragging-over");
});

方案2：sessionStorage临时存储 + 拖拽ID绑定 #

如果可以接受数据暂存到同源共享的sessionStorage（数据通过拖拽ID关联，仍符合事件绑定要求），这种方案更简洁：

拖拽源iframe代码 #

draggableElement.addEventListener("dragstart", e => {
  const dragId = crypto.randomUUID();
  const customData = { content: "someCustomData" };

  // 数据关联拖拽ID，存入sessionStorage
  sessionStorage.setItem(`drag-data-${dragId}`, JSON.stringify(customData));
  // 将ID存入DataTransfer
  e.setData("application/x-myapp-drag-id", dragId);
  e.setData("application/x-myapp-drag", "true");
});

// 拖拽结束后清理存储数据
draggableElement.addEventListener("dragend", e => {
  const dragId = e.dataTransfer.getData("application/x-myapp-drag-id");
  sessionStorage.removeItem(`drag-data-${dragId}`);
});

目标iframe代码 #

dropzoneElement.addEventListener("dragenter", e => {
  e.preventDefault();
  if (!e.dataTransfer.types.includes("application/x-myapp-drag")) return;

  // 在dragover事件中获取ID并读取数据（dragenter中无法直接调用getData）
  const handleDragover = (e) => {
    e.preventDefault();
    const dragId = e.dataTransfer.getData("application/x-myapp-drag-id");
    if (dragId) {
      const data = JSON.parse(sessionStorage.getItem(`drag-data-${dragId}`));
      console.log("拖拽数据：", data);
      dropzoneElement.classList.add("dragging-over");
      // 移除监听，避免重复执行
      dropzoneElement.removeEventListener("dragover", handleDragover);
    }
  };
  dropzoneElement.addEventListener("dragover", handleDragover);
});

dropzoneElement.addEventListener("dragleave", e => {
  dropzoneElement.classList.remove("dragging-over");
});

关键说明 #

1. 两种方案均要求iframe为同源（同域名、协议、端口），这是浏览器安全机制的硬性要求
2. 方案1完全通过事件与消息传递数据，更贴合“数据属于拖拽事件本身”的需求；方案2更简洁，适合小体量数据场景
3. 所有临时数据都会在dragend事件中清理，避免内存泄漏或存储冗余

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