拖拽时 DataTransfer 的 setData 不生效？

Good“莹雪提问于 2026-03-12 22:49:21 阅读 12

交互

我在做拖拽上传功能，想通过 setData 传个文件 ID，但 drop 事件里用 getData 拿不到值，一直是空字符串。

我试过在 dragstart 里这么写：

event.dataTransfer.setData('text/plain', 'file-123');

然后在 drop 里读：

const id = event.dataTransfer.getData('text/plain');
console.log(id); // 输出空字符串

浏览器是 Chrome 最新版，没报错，就是拿不到数据，是不是哪里漏了？

功能实现拖拽功能

我来解答赞 0 收藏

反馈

1 条解答

FSD-子涵 Lv1

这个问题挺常见的，基本就是两个坑：

1. dragover 事件没 preventDefault

必须在 dragover 里阻止默认行为，否则 drop 事件压根不会触发，数据自然拿不到。

2. setData 必须在 dragstart 同步执行

不能在 setTimeout 或者异步操作里调用 setData，Chrome 会当你是无效操作。

复制这个：

// 拖拽开始时设置数据

element.addEventListener('dragstart', function(event) {

    event.dataTransfer.setData('text/plain', 'file-123');

    // 或者用自定义类型

    // event.dataTransfer.setData('application/my-app-id', 'file-123');

});



// 拖拽经过时必须 preventDefault

element.addEventListener('dragover', function(event) {

    event.preventDefault();  // 这行必须有

});



// 读取数据

element.addEventListener('drop', function(event) {

    event.preventDefault();

    const id = event.dataTransfer.getData('text/plain');

    console.log(id);  // 这下应该能拿到了

});

如果还是拿不到，试试换成自定义的 MIME 类型，有时候 text/plain 会被浏览器特殊处理：

event.dataTransfer.setData('application/x-my-file-id', 'file-123');

// 读取时用对应的类型

const id = event.dataTransfer.getData('application/x-my-file-id');

基本就是这些，dragover 没 preventDefault 是最常见的原因。

2026-03-12 23:06