在大多数低代码平台中的设计器都支持组件拖拽的功能，这样大大地提高了用户的设计体验。而拖拽另一个比较常见的场景就是文件上传，通过拖拽的方式，可以让用户方便地上传文件。其实利用拖拽功能，我们还可以 跨越浏览器的边界，实现数据共享。
那么如何 跨越浏览器的边界，实现数据共享 呢？本文阿宝哥将介绍谷歌的一个开源项目 —— transmat，利用该项目可以实现上述功能。不仅如此，该项目还可以帮助我们实现一些比较好玩的功能，比如针对不同的可释放目标，做出不同的响应。
下面我们先通过 4 张 Gif 动图来感受一下，使用 transmat 开发的 神奇、好玩 的拖拽功能。
图 1（把可拖拽的元素，拖拽至富文本编辑器）
图 2（把可拖拽的元素，拖拽至 Chrome 浏览器，也支持其他浏览器）
图 3（把可拖拽的元素，拖拽至自定义的释放目标）
图 4（把可拖拽的元素，拖拽至 Chrome 开发者工具）
以上示例使用的浏览器版本：Chrome 91.0.4472.114（正式版本） (x86_64)
以上 4 张图中的 可拖拽元素都是同一个元素，当它被放置到不同的可释放目标时，产生了不同的效果。同时，我们也跨越了浏览器的边界，实现了数据的共享。看完以上 4 张动图，你是不是觉得挺神奇的。其实除了拖拽之外，该示例也支持复制、粘贴操作。不过，在详细介绍如何使用 transmat 实现上述功能之前，我们先来简单介绍一下 transmat 这个库。
Transmat 是一个围绕 DataTransfer API 的小型库 ，它使用 drag-drop 和 copy-paste 交互简化了在 Web 应用程序中传输和接收数据的过程。 DataTransfer API 能够将多种不同类型的数据传输到用户设备上的其他应用程序，该 API 所支持的数据类型，常见的有这几种：text/plain、text/html 和 application/json 等。
（图片来源：google.github.io/transmat/）
了解完 transmat 是什么之后，我们来看一下它的应用场景：