DataTransfer 对象构建器

DataTransfer 是 HTML5 拖放 API 的核心对象，用于在拖放操作中携带数据。它在 DragEvent.dataTransfer 中可用。核心属性包括：

• effectAllowed — 在 dragstart 中设置，指定允许的拖放操作类型（none/copy/move/link/all 等）
• dropEffect — 在 dragover 中设置，指定目标期望的操作（必须匹配 effectAllowed）
• files — 只读 FileList，包含从操作系统拖入的文件
• items — DataTransferItemList，提供更底层的数据访问
• types — 只读数组，列出所有可用的数据格式（如 text/plain、Files）
• setData(format, data) — 设置指定格式的数据（仅在 dragstart 中有效）
• getData(format) — 读取指定格式的数据（主要在 drop 中使用）

effectAllowed 在 dragstart 事件中由拖拽源设置，表示该次拖放允许哪些类型的操作。它是一个"能力声明"。

dropEffect 在 dragover 事件中由放置目标设置，表示目标期望的具体操作。它必须在 effectAllowed 允许的范围内，否则浏览器会忽略放置。

关系示例：

• effectAllowed=copyMove → dropEffect 可以是 copy 或 move
• effectAllowed=link → dropEffect 只能是 link 或 none
• effectAllowed=none → 任何 dropEffect 都会被阻止

现代浏览器支持 new DataTransfer() 构造函数，可以在测试中创建 DataTransfer 实例：

const dt = new DataTransfer();
dt.setData('text/plain', 'hello');
dt.effectAllowed = 'all';
const event = new DragEvent('drop', { dataTransfer: dt, bubbles: true });
element.dispatchEvent(event);

对于需要文件的场景，可以使用 dt.items.add(new File([...], 'test.txt')) 添加文件。

DataTransfer 对象有一个内部的 mode 属性：

• dragstart 事件中：mode = "readwrite"，可以调用 setData、setDragImage
• dragover / drop 等事件中：mode = "readonly"，setData 调用会被静默忽略

这是浏览器的安全机制，防止放置目标修改拖拽源已经设置的数据。只有在 dragstart 中可以写入数据。

浏览器默认不允许在任意元素上放置。必须在 dragover 事件中调用 event.preventDefault()，告诉浏览器该元素是一个合法的放置目标。否则 drop 事件不会触发。

常见写法：

target.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须！
  e.dataTransfer.dropEffect = 'copy';
});

移动端浏览器基本不支持 HTML5 Drag and Drop API。这是因为移动设备使用触摸事件（touchstart/touchmove/touchend），而不是鼠标拖放。如果需要在移动端实现拖放功能，建议使用触摸事件或专门的拖放库（如 SortableJS、Interact.js）。

本工具主要用于桌面端浏览器的拖放功能开发和测试。