拖放（Drag and Drop）是现代 Web 开发中不可或缺的一部分。HTML5 DnD API （dataTransfer）为实现拖放操作提供了一个通用的接口。在这个 API 中，使用 setData 和 getData 方法来设置和获取传输数据。然而，在某些浏览器中，这些方法可能无法按照预期工作。
问题描述
某些浏览器（如 Safari、Chrome 等）在使用 setData 和 getData 方法时可能会出现以下错误：
- 设置的数据无法正确地传输
- 无法从
dataTransfer对象中获取数据 - 获取的数据类型不正确
通常，这些问题会导致拖放操作失败或数据被意外地清空。
问题原因
这些问题由于浏览器对 dataTransfer 对象的实现方式存在差异而导致。具体而言，这些浏览器可能会将 dataTransfer 对象视为只读对象，不允许修改其中的属性。因此，当使用 setData 方法时，设置的数据将无法正确地保存在 dataTransfer 对象中。类似地，当使用 getData 方法时，可能会返回错误的数据或者无法获取任何数据。
解决方案
为了解决这些问题，我们需要使用一种不同的方法来设置和获取数据。HTML5 DnD API 中提供了另外两个方法 setDragImage 和 addData，它们可以用来替代 setData 和 getData。
使用 setDragImage 和 addData 方法
// 设置传输数据
event.dataTransfer.setData('text/plain', 'Hello World!');
// 获取传输数据
const data = event.dataTransfer.getData('text/plain');
console.log(data);可以改写为：
-- -------------------- ---- ------- -- ------ ----- --------- - --- -------- ------------- - ---------------- ------------------------------------------ -- --- ---------------------------------------- ------ --------- -- ------ ----- ---- - --------------------------------------------- ------------------
在这个例子中，使用 setDragImage 方法设置拖动时的图像，并使用 addData 方法添加要传输的数据。在获取数据时，我们通过 items 属性获取传输项目列表，然后使用 getAsPlainText 方法从第一个项目中获取纯文本数据。
请注意，addData 方法不仅可以用于添加纯文本数据，还可以添加其他类型的数据（如 URL、文件等）。
使用 setData 和 getData 方法的替代方案
另一种解决方法是使用 clipboard.js 等工具库来实现跨浏览器的拖放操作。这种方法基于 copy 和 paste 操作，将数据存储在剪贴板中并在拖放操作完成后将其检索出来。
const clipboard = new ClipboardJS('.draggable', {
text: function() {
return 'Hello World!';
}
});这里我们使用 clipboard.js 来实现复制操作。首先，我们创建一个 ClipboardJS 对象，并将其绑定到要拖动的元素上。然后，我们使用 text 回调函数返回要复制的数据。在拖放操作完成后，可以使用 paste 事件来检索从剪贴板中检索数据。
document.addEventListener('paste', function(event) {
const data = event.clipboardData.getData('text/plain');
console.log(data);
});结论
如果您正在使用 HTML5 DnD API 并遇到了 dataTransfer 的兼容性问题，那么本文提供的解决方案可能会对您有所帮
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30347