拖放（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 方法
-- ------ ---------------------------------------- ------ --------- -- ------ ----- ---- - ----------------------------------------- ------------------
可以改写为：
-- ------ ----- --------- - --- -------- ------------- - ---------------- ------------------------------------------ -- --- ---------------------------------------- ------ --------- -- ------ ----- ---- - --------------------------------------------- ------------------
在这个例子中，使用 setDragImage 方法设置拖动时的图像，并使用 addData 方法添加要传输的数据。在获取数据时，我们通过 items 属性获取传输项目列表，然后使用 getAsPlainText 方法从第一个项目中获取纯文本数据。
请注意，addData 方法不仅可以用于添加纯文本数据，还可以添加其他类型的数据（如 URL、文件等）。
使用 setData 和 getData 方法的替代方案
另一种解决方法是使用 clipboard.js 等工具库来实现跨浏览器的拖放操作。这种方法基于 copy 和 paste 操作，将数据存储在剪贴板中并在拖放操作完成后将其检索出来。
----- --------- - --- ------------------------- -
----- ---------- -
------ ------ --------
-
---这里我们使用 clipboard.js 来实现复制操作。首先，我们创建一个 ClipboardJS 对象，并将其绑定到要拖动的元素上。然后，我们使用 text 回调函数返回要复制的数据。在拖放操作完成后，可以使用 paste 事件来检索从剪贴板中检索数据。
---------------------------------- --------------- - ----- ---- - ------------------------------------------ ------------------ ---
结论
如果您正在使用 HTML5 DnD API 并遇到了 dataTransfer 的兼容性问题，那么本文提供的解决方案可能会对您有所帮
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30347