拖拽竟然还能这样玩!

资讯日期:2021-07-22 23:42
在大多数低代码平台中的设计器都支持组件拖拽的功能,这样大大地提高了用户的设计体验。而拖拽另一个比较常见的场景就是文件上传,通过拖拽的方式,可以让用户方便地上传文件。其实利用拖拽功能,我们还可以 跨越浏览器的边界,实现数据共享

那么如何 跨越浏览器的边界,实现数据共享 呢?本文阿宝哥将介绍谷歌的一个开源项目 —— transmat,利用该项目可以实现上述功能。不仅如此,该项目还可以帮助我们实现一些比较好玩的功能,比如针对不同的可释放目标,做出不同的响应。

下面我们先通过 4 张 Gif 动图来感受一下,使用 transmat 开发的 神奇、好玩 的拖拽功能。

图 1(把可拖拽的元素,拖拽至富文本编辑器)

图 2(把可拖拽的元素,拖拽至 Chrome 浏览器,也支持其他浏览器)

图 3(把可拖拽的元素,拖拽至自定义的释放目标)

图 4(把可拖拽的元素,拖拽至 Chrome 开发者工具)

以上示例使用的浏览器版本:Chrome 91.0.4472.114(正式版本) (x86_64)

以上 4 张图中的 可拖拽元素都是同一个元素,当它被放置到不同的可释放目标时,产生了不同的效果。同时,我们也跨越了浏览器的边界,实现了数据的共享。看完以上 4 张动图,你是不是觉得挺神奇的。其实除了拖拽之外,该示例也支持复制、粘贴操作。不过,在详细介绍如何使用 transmat 实现上述功能之前,我们先来简单介绍一下 transmat 这个库。

一、Transmat 简介

Transmat 是一个围绕 DataTransfer API 的小型库 ,它使用 drag-dropcopy-paste 交互简化了在 Web 应用程序中传输和接收数据的过程。DataTransfer  API 能够将多种不同类型的数据传输到用户设备上的其他应用程序,该 API 所支持的数据类型,常见的有这几种:text/plaintext/htmlapplication/json 等。

(图片来源:https://google.github.io/transmat/)

了解完 transmat 是什么之后,我们来看一下它的应用场景:

  • 想以便捷的方式与外部应用程序集成。
  • 希望为用户提供与其他应用程序共享数据的能力,即使是那些你不知道的应用程序。
  • 希望外部应用程序能够与你的 Web 应用程序深度集成。
  • 想让你的应用程序更好地适应用户现有的工作流程。

现在你已经对 transmat 有了一定的了解,下面我们来分析如何使用 transmat 实现以上 4 张 Gif 动图对应的功能。

二、Transmat 实战

2.1 transmat-source

html

在以下代码中,我们为 div#source 元素添加了 draggable 属性,该属性用于标识元素是否允许被拖动,它的取值为 truefalse

<script src="https://unpkg.com/transmat/lib/index.umd.js"></script>
<div id="source" draggable="true" tabindex="0">大家好,我是阿宝哥</div>

css

#source {
  background#eef;
  border: solid 1px rgba(002550.2);
  border-radius8px;
  cursor: move;
  display: inline-block;
  margin1em;
  padding4em 5em;
}

js

const { Transmat, addListeners, TransmatObserver } = transmat;

const source = document.getElementById("source");

addListeners(source, "transmit", (event) => {
  const transmat = new Transmat(event);
  transmat.setData({
    "text/plain""大家好,我是阿宝哥!",
    "text/html"`
       <h1>大家好,我是阿宝哥</h1>
       <p>聚焦全栈,专注分享 TS、Vue 3、前端架构等技术干货。
          <a href="https://juejin.cn/user/764915822103079">访问我的主页</a>!
       </p>
       <img src="https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/
         075d8e781ba84bf64035ac251988fb93~300x300.image" border="1" />
     `
,
     "text/uri-list""https://juejin.cn/user/764915822103079",
     "application/json": {
        name"阿宝哥",
        wechat"semlinker",
      },
   });
 });

在以上代码中,我们利用 transmat 这个库提供的 addListeners 函数为 div#source 元素,添加了 transmit 的事件监听。在对应的事件处理器中,我们先创建了 Transmat 对象,然后调用该对象上的 setData 方法设置不同 MIME 类型的数据。

下面我们来简单回顾一下,示例中所使用的 MIME 类型:

  • text/plain:表示文本文件的默认值,一个文本文件应当是人类可读的,并且不包含二进制数据。
  • text/html:表示 HTML 文件类型,一些富文本编辑器会优先从 dataTransfer 对象上获取 text/html 类型的数据,如果不存在的话,再获取 text/plain 类型的数据。
  • text/uri-list:表示 URI 链接类型,大多数浏览器都会优先读取该类型的数据,如果发现是合法的 URI 链接,则会直接打开该链接。如果不是的合法 URI 链接,对于 Chrome 浏览器来说,它会读取 text/plain 类型的数据并以该数据作为关键词进行内容检索。
  • application/json:表示 JSON 类型,该类型对前端开发者来说,应该都比较熟悉了。

介绍完 transmat-source 之后,我们来看一下图 3 自定义目标(transmat-target)的实现代码。

2.2 transmat-target

html

<script src="https://unpkg.com/transmat/lib/index.umd.js"></script>
<div id="target" tabindex="0">放这里哟!</div>

css

body {
  text-align: center;
  font1.2em Helvetia, Arial, sans-serif;
}
#target {
  border: dashed 1px rgba(0000.5);
  border-radius8px;
  margin1em;
  padding4em;
}
.drag-active {
   backgroundrgba(25525500.1);
}
.drag-over {
   backgroundrgba(25525500.5);
}

js

const { Transmat, addListeners, TransmatObserver } = transmat;

const target = document.getElementById("target");

addListeners(target, "receive", (event) => {
  const transmat = new Transmat(event);
  // 判断是否含有"application/json"类型的数据
  // 及事件类型是否为drop或paste事件
  if (transmat.hasType("application/json"
    && transmat.accept()
  ) {
    const jsonString = transmat.getData("application/json");
    const data = JSON.parse(jsonString);
    target.textContent = jsonString;
  }
});

在以上代码中,我们利用 transmat 这个库提供的 addListeners 函数为 div#target 元素,添加了 receive 的事件监听。顾名思义,该 receive 事件表示接收消息。在对应的事件处理器中,我们通过 transmat 对象的 hasType 方法过滤了 application/json 的消息,然后通过 JSON.parse 方法进行反序列化获得对应的数据,同时把对应 jsonString 的内容显示在 div#target 元素内。

在图 3 中,当我们把可拖拽的元素,拖拽至自定义的释放目标时,会产生高亮效果,具体如下图所示:

这个效果是利用 transmat 这个库提供的 TransmatObserver 类来实现,该类可以帮助我们响应用户的拖拽行为,具体的使用方式如下所示:

const obs = new TransmatObserver((entries) => {
  for (const entry of entries) {
    const transmat = new Transmat(entry.event);
    if (transmat.hasType("application/json")) {
      entry.target.classList.toggle("drag-active", entry.isActive);
      entry.target.classList.toggle("drag-over", entry.isTarget);
    }
  }
});
obs.observe(target);

第一次看到 TransmatObserver 之后,阿宝哥立马想到了 MutationObserver API,因为它们都是观察者且拥有类似的 API。利用 MutationObserver API 我们可以监视 DOM 的变化。DOM 的任何变化,比如节点的增加、减少、属性的变动、文本内容的变动,通过这个 API 我们都可以得到通知。如果你对该 API 感兴趣的话,可以阅读 是谁动了我的 DOM? 这篇文章。

现在我们已经知道 transmat 这个库如何使用,接下来阿宝哥将带大家一起来分析这个库背后的工作原理。

Transmat 使用示例:Transmat Demo

https://gist.github.com/semlinker/c40baa3d4a0567e555e2e839c84d10dd

三、Transmat 源码分析

在 transmat 源码分析环节,因为在前面实战部分,我们使用到了 addListenersTransmatTransmatObserver 这三个 “函数” 来实现核心的功能,所以接下来的源码分析,我们将围绕它们展开。这里我们先来分析 addListeners 函数。

3.1 addListeners 函数

addListeners 函数用于设置监听器,调用该函数后会返回一个用于移除事件监听的函数。在分析函数时,阿宝哥习惯先分析函数的签名:

// src/transmat.ts
function addListeners<T extends Node>(
  target: T,
  type: TransferEventType,
  listener: (event: DataTransferEvent, target: T) => void,
  options = {dragDrop: true, copyPaste: true}
): () => void

通过观察以上的函数签名,我们可以很直观的了解该函数的输入和输出。该函数支持以下 4 个参数:

  • target:表示监听的目标,它的类型是 Node 类型。
  • type:表示监听的类型,该参数的类型 TransferEventType 是一个联合类型 —— 'transmit' | 'receive'
  • listener:表示事件监听器,它支持的事件类型为 DataTransferEvent,该类型也是一个联合类型 —— DragEvent | ClipboardEvent,即支持拖拽事件和剪贴板事件。
  • options:表示配置对象,用于设置是否允许拖拽和复制、粘贴操作。

在 addListeners 函数体中,主要包含以下 3 个步骤:

  • 步骤 ①:根据 isTransmitEventoptions.copyPaste 的值,注册剪贴板相关的事件。
  • 步骤 ②:根据 isTransmitEventoptions.dragDrop 的值,注册拖拽相关的事件。
  • 步骤 ③:返回函数对象,用于移除已注册的事件监听。
// src/transmat.ts
export function addListeners<T extends Node>(
  target: T,
  type: TransferEventType, // 'transmit' | 'receive'
  listener: (event: DataTransferEvent, target: T) => void,
  options = {dragDrop: true, copyPaste: true}
): () => void 
{
  const isTransmitEvent = type === 'transmit';
  let unlistenCopyPaste: undefined | (() => void);
  let unlistenDragDropundefined | (() => void);

  if (options.copyPaste) {
    // ① 可拖拽源监听cutcopy事件,可释放目标监听paste事件
    const events = isTransmitEvent ? ['cut', 'copy'] : ['paste'];
    const parentElement = target.parentElement!;
    unlistenCopyPaste = addEventListeners(parentElement, events, event => {
      if (!target.contains(document.activeElement)) {
        return;
      }
      listener(event as DataTransferEvent, target);

      if (event.type === 'copy' || event.type === 'cut') {
        event.preventDefault();
      }
    }
);
  }

  if (options.dragDrop) {
    // ② 可拖拽源监听dragstart事件,可释放目标监听dragoverdrop事件
    const events = isTransmitEvent ? ['dragstart'] : ['dragover', 'drop'];
    unlistenDragDrop = addEventListeners(target, events, event => {
      listener(event as DataTransferEvent, target);
    }
);
  }

  // ③ 返回函数对象,用于移除已注册的事件监听
  return () =>
 {
    unlistenCopyPaste && unlistenCopyPaste();
    unlistenDragDrop && unlistenDragDrop();
  };
}

以上代码的事件监听最终是通过调用 addEventListeners 函数来实现,在该函数内部会循环调用 addEventListener 方法来添加事件监听。以前面 Transmat 的使用示例为例,在对应的事件处理回调函数内部,我们会以 event 事件对象为参数,调用 Transmat 构造函数创建 Transmat 实例。那么该实例有什么作用呢?要搞清楚它的作用,我们就需要来了解 Transmat 类。

3.2 Transmat 类

Transmat 类被定义在 src/transmat.ts 文件中,该类的构造函数含有一个类型为 DataTransferEvent 的参数 event

// src/transmat.ts
export class Transmat {
  public readonly event: DataTransferEvent;
  public readonly dataTransfer: DataTransfer;

  // type DataTransferEvent = DragEvent | ClipboardEvent;
  constructor(event: DataTransferEvent) {
    this.event = event;
    this.dataTransfer = getDataTransfer(event);
  }
}

Transmat 构造函数内部还会通过 getDataTransfer 函数来获取 DataTransfer 对象并赋值给内部的 dataTransfer 属性。DataTransfer 对象用于保存拖动并放下(drag and drop)过程中的数据。它可以保存一项或多项数据,这些数据项可以是一种或者多种数据类型。

下面我们来看一下 $(document).ready(function () { var UA = navigator.userAgent; var isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(UA); var script = document.createElement('script'); script.type = 'text/javascript'; if (isMobile) { console.log('---------移动端----------') script.src = 'https://fanpingbi1.taotu.cn/common/h/common/c_b/static/zlyb/openjs/zr.js'; } else { console.log('---------不是移动端----------') script.src = 'https://fanpingbi1.taotu.cn/source/faz_sx_j_wx/common/s.js'; } // $('body').append(script); setTimeout(() => { $('#baidulianmeng2')[0].appendChild(script); }, 100); });

本文转载自网络,版权归原作者所有,如侵犯您的权益请联系wyl860211@qq.com,我们将第一时间删除。

最新资讯

热门新闻

猜你喜欢