拖拽居然還能這樣玩！

⚠️本文爲掘金社區首發簽約文章，未獲受權禁止轉載

在大多數低代碼平臺中的設計器都支持組件拖拽的功能，這樣大大地提升了用戶的設計體驗。而拖拽另外一個比較常見的場景就是文件上傳，經過拖拽的方式，可讓用戶方便地上傳文件。其實利用拖拽功能，咱們還能夠 跨越瀏覽器的邊界，實現數據共享。

那麼如何 跨越瀏覽器的邊界，實現數據共享 呢？本文阿寶哥將介紹谷歌的一個開源項目 —— transmat，利用該項目能夠實現上述功能。不只如此，該項目還能夠幫助咱們實現一些比較好玩的功能，好比針對不一樣的可釋放目標，作出不一樣的響應。

下面咱們先經過 4 張 Gif 動圖來感覺一下，使用 transmat 開發的 神奇、好玩 的拖拽功能。

圖 1（把可拖拽的元素，拖拽至富文本編輯器）

圖 2（把可拖拽的元素，拖拽至 Chrome 瀏覽器，也支持其餘瀏覽器）

圖 3（把可拖拽的元素，拖拽至自定義的釋放目標）

圖 4（把可拖拽的元素，拖拽至 Chrome 開發者工具）

以上示例使用的瀏覽器版本：Chrome 91.0.4472.114（正式版本） (x86_64)

以上 4 張圖中的 可拖拽元素都是同一個元素，當它被放置到不一樣的可釋放目標時，產生了不一樣的效果。同時，咱們也跨越了瀏覽器的邊界，實現了數據的共享。看完以上 4 張動圖，你是否是以爲挺神奇的。其實除了拖拽以外，該示例也支持複製、粘貼操做。不過，在詳細介紹如何使用 transmat 實現上述功能以前，咱們先來簡單介紹一下 transmat 這個庫。

1、Transmat 簡介

Transmat 是一個圍繞 DataTransfer API 的小型庫 ，它使用 drag-drop 和 copy-paste 交互簡化了在 Web 應用程序中傳輸和接收數據的過程。 DataTransfer API 可以將多種不一樣類型的數據傳輸到用戶設備上的其餘應用程序，該 API 所支持的數據類型，常見的有這幾種：text/plain、text/html 和 application/json 等。

（圖片來源：google.github.io/transmat/）

瞭解完 transmat 是什麼以後，咱們來看一下它的應用場景：

• 想以便捷的方式與外部應用程序集成。
• 但願爲用戶提供與其餘應用程序共享數據的能力，即便是那些你不知道的應用程序。
• 但願外部應用程序可以與你的 Web 應用程序深度集成。
• 想讓你的應用程序更好地適應用戶現有的工做流程。

如今你已經對 transmat 有了必定的瞭解，下面咱們來分析如何使用 transmat 實現以上 4 張 Gif 動圖對應的功能。

2、Transmat 實戰

2.1 transmat-source

html

在如下代碼中，咱們爲 div#source 元素添加了 draggable 屬性，該屬性用於標識元素是否容許被拖動，它的取值爲 true 或 false。

<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(0, 0, 255, 0.2);
  border-radius: 8px;
  cursor: move;
  display: inline-block;
  margin: 1em;
  padding: 4em 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 三、前端架構等技術乾貨。 <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;
  font: 1.2em Helvetia, Arial, sans-serif;
}
#target {
  border: dashed 1px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  margin: 1em;
  padding: 4em;
}
.drag-active {
   background: rgba(255, 255, 0, 0.1);
}
.drag-over {
   background: rgba(255, 255, 0, 0.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

gist.github.com/semlinker/c…

3、Transmat 源碼分析

在 transmat 源碼分析環節，由於在前面實戰部分，咱們使用到了 addListeners、Transmat、TransmatObserver 這三個 「函數」 來實現核心的功能，因此接下來的源碼分析，咱們將圍繞它們展開。這裏咱們先來分析 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 個步驟：

• 步驟 ①：根據 isTransmitEvent 和 options.copyPaste 的值，註冊剪貼板相關的事件。
• 步驟 ②：根據 isTransmitEvent 和 options.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 unlistenDragDrop: undefined | (() => void);

  if (options.copyPaste) {
    // ① 可拖拽源監聽cut和copy事件，可釋放目標監聽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事件，可釋放目標監聽dragover和drop事件
    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）過程當中的數據。它能夠保存一項或多項數據，這些數據項能夠是一種或者多種數據類型。

下面咱們來看一下 getDataTransfer 函數的具體實現：

// src/data_transfer.ts
export function getDataTransfer(event: DataTransferEvent): DataTransfer {
  const dataTransfer =
    (event as ClipboardEvent).clipboardData ??
    (event as DragEvent).dataTransfer;
  if (!dataTransfer) {
    throw new Error('No DataTransfer available at this event.');
  }
  return dataTransfer;
}
複製代碼

在以上代碼中，使用了空值合併運算符 ??。該運算符的特色是：當左側操做數爲 null 或 undefined 時，其返回右側的操做數，不然返回左側的操做數。即先判斷是否爲剪貼板事件，若是是的話就會從 clipboardData 屬性獲取 DataTransfer 對象。不然，就會從 dataTransfer 屬性獲取。

對於可拖拽源，在建立完 Transmat 對象以後，咱們就能夠調用該對象上的 setData 方法保存一項或多項數據。好比，在如下代碼中，咱們設置了不一樣類型的多項數據：

transmat.setData({
  "text/plain": "你們好，我是阿寶哥!",
  "text/html": ` <h1>你們好，我是阿寶哥</h1> ... `,
  "text/uri-list": "https://juejin.cn/user/764915822103079",
  "application/json": {
     name: "阿寶哥",
     wechat: "semlinker",
   },
});
複製代碼

瞭解完 setData 方法的用法以後，咱們來看一下它的具體實現：

// src/transmat.ts
setData(
  typeOrEntries: string | {[type: string]: unknown},
  data?: unknown
): void {
  if (typeof typeOrEntries === 'string') { 
    this.setData({[typeOrEntries]: data});
  } else {
    // 處理多種類型的數據
    for (const [type, data] of Object.entries(typeOrEntries)) {
      const stringData =
        typeof data === 'object' ? JSON.stringify(data) : `${data}`;
      this.dataTransfer.setData(normalizeType(type), stringData);
     }
   }
}
複製代碼

由以上代碼可知，在 setData 方法內部最終會調用 dataTransfer.setData 方法來保存數據。dataTransfer 對象的 setData 方法支持兩個字符串類型的參數：format 和 data。它們分別表示要保存的數據格式和實際的數據。若是給定數據格式不存在，則將對應的數據保存到末尾。若是給定數據格式已存在，則將使用新的數據替換舊的數據。

下圖是 dataTransfer.setData 方法的兼容性說明，由圖可知主流的現代瀏覽器都支持該方法。

（圖片來源：caniuse.com/mdn-api_dat…

Transmat 類除了擁有 setData 方法以外，它也含有一個 getData 方法，用於獲取已保存的數據。getData 方法支持一個字符串類型的參數 type，用於表示數據的類型。在獲取數據前，會調用 hasType 方法判斷是否含有該類型的數據。若是有包含的話，就會經過 dataTransfer 對象的 getData 方法來獲取該類型對應的數據。

// src/transmat.ts
getData(type: string): string | undefined {
  return this.hasType(type)
    ? this.dataTransfer.getData(normalizeType(type))
    : undefined;
}
複製代碼

此外，在調用 getData 方法前，還會調用 normalizeType 函數，對傳入的 type 類型參數進行標準化操做。具體的以下所示：

// src/data_transfer.ts
export function normalizeType(input: string) {
  const result = input.toLowerCase();
  switch (result) {
    case 'text':
      return 'text/plain';
    case 'url':
      return 'text/uri-list';
    default:
      return result;
  }
}
複製代碼

一樣，咱們也來看一下 dataTransfer.getData 方法的兼容性：

（圖片來源：caniuse.com/mdn-api_dat…

好的，Transmat 類中的 setData 和 getData 這兩個核心方法就先介紹到這裏。接下來咱們來介紹另外一個類 —— TransmatObserver 。

3.3 TransmatObserver 類

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 類的構造函數：

// src/transmat_observer.ts
export class TransmatObserver {
  private readonly targets = new Set<Element>(); // 觀察的目標集合
  private prevRecords: ReadonlyArray<TransmatObserverEntry> = []; // 保存前一次的記錄
  private removeEventListeners = () => {};

  constructor(private readonly callback: TransmatObserverCallback) {}
}
複製代碼

由以上代碼可知，TransmatObserver 類的構造函數支持一個類型爲 TransmatObserverCallback 的參數 callback，該參數對應的類型定義以下：

// src/transmat_observer.ts
export type TransmatObserverCallback = ( entries: ReadonlyArray<TransmatObserverEntry>, observer: TransmatObserver ) => void;
複製代碼

TransmatObserverCallback 函數類型接收兩個參數：entries 和 observer。其中 entries 參數的類型是一個

只讀數組（ReadonlyArray），數組中每一項的類型是 TransmatObserverEntry，對應的類型定義以下：

// src/transmat_observer.ts
export interface TransmatObserverEntry {
  target: Element;
  /** type DataTransferEvent = DragEvent | ClipboardEvent */
  event: DataTransferEvent;
  /** Whether a transfer operation is active in this window. */
  isActive: boolean;
  /** Whether the element is the active target (dragover). */
  isTarget: boolean;
}
複製代碼

在前面 transmat-target 的示例中，當建立完 TransmatObserver 實例以後，就會調用該實例的 observe 方法並傳入待觀察的對象。observe 方法的實現並不複雜，具體以下所示：

// src/transmat_observer.ts
observe(target: Element) {
  /** private readonly targets = new Set<Element>(); */
  this.targets.add(target);
  if (this.targets.size === 1) {
    this.addEventListeners();
  }
}
複製代碼

在 observe 方法內部，會把需觀察的元素保存到 targets Set 集合中。當 targets 集合的大小等於 1 時，就會調用當前實例的 addEventListeners 方法來添加事件監聽：

// src/transmat_observer.ts
private addEventListeners() {
  const listener = this.onTransferEvent as EventListener;
  this.removeEventListeners = addEventListeners(
    document,
    ['dragover', 'dragend', 'dragleave', 'drop'],
    listener,
    true
  );
}
複製代碼

在私有的 addEventListeners 方法內部，會利用咱們前面介紹的 addEventListeners 函數來爲 document 元素批量添加與拖拽相關的事件監聽。而對應的事件說明以下所示：

• dragover：當元素或選中的文本被拖到一個可釋放目標上時觸發；
• dragend：當拖拽操做結束時觸發（好比鬆開鼠標按鍵）；
• dragleave：當拖拽元素或選中的文本離開一個可釋放目標時觸發；
• drop：當元素或選中的文本在可釋放目標上被釋放時觸發。

其實與拖拽相關的事件並不只僅只有以上四種，若是你對完整的事件感興趣的話，能夠閱讀 MDN 上 HTML 拖放 API 這篇文章。下面咱們來重點分析 onTransferEvent 事件監聽器：

private onTransferEvent = (event: DataTransferEvent) => {
  const records: TransmatObserverEntry[] = [];
  for (const target of this.targets) {
    // 當光標離開瀏覽器時，對應的事件將會被派發到body或html節點
    const isLeavingDrag =
      event.type === 'dragleave' &&
        (event.target === document.body ||
         event.target === document.body.parentElement);

    // 頁面上是否有拖拽行爲發生
    // 當拖拽操做結束時觸發dragend事件
    // 當元素或選中的文本在可釋放目標上被釋放時觸發drop事件
    const isActive = event.type !== 'drop'
      && event.type !== 'dragend' && !isLeavingDrag;

    // 判斷可拖拽的元素是否被拖到target元素上
    const isTargetNode = target.contains(event.target as Node);
    const isTarget = isActive && isTargetNode 
      && event.type === 'dragover';

    records.push({
      target,
      event,
      isActive,
      isTarget,
   });
 }
    
 // 僅當記錄發生變化的時候，纔會調用回調函數
 if (!entryStatesEqual(records, this.prevRecords)) {
   this.prevRecords = records as ReadonlyArray<TransmatObserverEntry>;
   this.callback(records, this);
 }
}
複製代碼

在以上代碼中，使用了 node.contains(otherNode) 方法來判斷可拖拽的元素是否被拖到 target 元素上。當 otherNode 是 node 的後代節點或者 node 節點自己時，返回 true，不然返回 false。此外，爲了不頻繁地觸發回調函數，在調用回調函數前會先調用 entryStatesEqual 函數來檢測記錄是否發生變化。entryStatesEqual 函數的實現比較簡單，具體以下所示：

// src/transmat_observer.ts
function entryStatesEqual( a: ReadonlyArray<TransmatObserverEntry>, b: ReadonlyArray<TransmatObserverEntry> ): boolean {
  if (a.length !== b.length) {
    return false;
  }
  // 若是有一項不匹配，則當即返回false。
  return a.every((av, index) => {
    const bv = b[index];
    return av.isActive === bv.isActive && av.isTarget === bv.isTarget;
  });
}
複製代碼

與 MutationObserver 同樣，TransmatObserver 也提供了用於獲取最近已觸發記錄的 takeRecords 方法和用於 「斷開」 鏈接的 disconnect 方法：

// 返回最近已觸發記錄
takeRecords() {
  return this.prevRecords;
}

// 移除全部目標及事件監聽器
disconnect() {
  this.targets.clear();
  this.removeEventListeners();
}
複製代碼

到這裏 Transmat 源碼分析的相關內容已經介紹完了，若是你對該項目感興趣的話，能夠自行閱讀該項目的完整源碼。該項目是使用 TypeScript 開發，已入門 TypeScript 的小夥伴能夠利用該項目鞏固一下所學的 TS 知識及 OOP 面向對象的設計思想。

4、總結

本文阿寶哥介紹了谷歌 transmat 開源項目的應用場景、使用方式及相關源碼。在源碼分析環節，咱們一塊兒回顧了與拖拽相關的事件及 DataTransfer API。此外，咱們還分析了能夠幫助咱們響應用戶的拖拽行爲的 TransmatObserver 類，但願分析完該類以後，你對 MutationObserver API 能有更深入的理解。同時，在從此的工做中，若遇到相似的場景能夠參考 TransmatObserver 類來實現本身的 Observer 類。

雖然自定義負載（自定義 JSON 數據）對於你控制的應用程序之間的通訊頗有用，但它也限制了將數據傳輸到外部應用程序的能力。要解決這個問題，你能夠考慮使用輕量的 JSON-LD（Linked Data） 數據格式，它對應的 MIME 類型是 'application/ld+json'。利用該數據格式，能夠更好地組織和連接數據，從而建立更好的 Web 應用。若是你對該數據格式感興趣，想深刻學習 JSON-LD（Linked Data） 的話，能夠閱讀這篇文章。

5、參考資源

• MDN — MIME 類型
• MDN — DataTransfer
• MDN — HTML 拖放 API
• 是誰動了個人 DOM？