search

lostvita / blog

60 stars 47 forks source link

DataTransfer对象完全手册 #18

Open lostvita opened 5 years ago

lostvita commented 5 years ago

前言

说明：请使用该Token：1562835370187访问本文Demo，或者点击访问。

本文通过实现（文本/文件）拖动预览功能全面、深入分析整个过程涉及的对象及其API，增强我们对文件类数据的理解和应用。介绍的内容包括：

DataTransfer对象

DataTransfer对象用来保存在一个拖放操作中被拖动的数据，它可以包含一个或多个数据项，每一个数据项又可以有一种或多种数据类型。

DataTransfer对象的属性分为标准属性和gecko属性。其中，标准属性是所有现代浏览器都支持的，gecko属性则只有gecko内核的浏览器才支持。相应地，DataTransfer的方法也有标准方法和gecko方法之分。

DataTransfer的标准属性

属性名 取值 备注
dropEffect none, copy, link, move 获取/设置当前的拖放操作类型
effectAllowed copyLink, copyMove, link, linkMove, move, all or uninitialized(默认值) 获取/设置允许的所有拖动操作类型
files Arrray 被拖动的文件信息列表
items DataTransferItemList对象 只读，被拖动的数据列表
types Arrray 只读，在dragStart事件中设置(通过setData API)的数据格式的列表

DataTransfer的标准方法

方法名 参数 备注
clearData([format]) forma: [可选]数据类型 清空所有指定类型的拖动数据
getData(format) format: [必须]数据类型 获取指定类型的拖动数据，无数据则返回空字符串
setData(format, data) format: [必须]数据类型，data: [必须]添加到拖动对象中的数据 设置给定类型的数据。如果该类型的数据不存在，则添加在列表末尾；如果存在，则替换。
setDragImage(img, xOffset, yOffset) img: [必须]图像元素；xOffset: [必须]X轴偏移值；yOffset: [必须]Y轴偏移值 自定义拖动图像

关于DataTransfer对象的Gecko属性和方法，移步这里了解。

拖动事件

用户在拖动元素或者文本时，每隔几百毫秒就会触发拖动事件。拖动事件类型有：

document.addEventListener('dragstart', evt => {
    console.log('dragstart');    
});
document.addEventListener('dragenter', evt => {
    console.log('dragenter');    
});
document.addEventListener('dragleave', evt => {
    console.log('dragleave');    
});
document.addEventListener('dragover', evt => {
    event.preventDefault();
    console.log('dragover');    
});
document.addEventListener('drop', evt => {
    console.log('drop');    
});
document.addEventListener('dragend', evt => {
    console.log('dragend');    
});

拖动事件是绑定在元素身上的，上述示例代码绑定在了document对象上，则对整个文档页面的拖动事件生效；但在实际应用中，我们更多是劫持某个输入区域的拖放操作，譬如：

$inputBox.addEventListener'drop', evt) => {
  evt.preventDefault()
  console.log('drop')
}, {
  capture: false,
  passive: false
})

特别地，拖动事件有严格的触发次序： 假定有一个拖放区域，拖动外部元素/文本到该区域，可能触发的拖动事件次序有如下两种类型： 或是

拖动效果

DataTransfer对象提供了dropEffect和effectAllowed两个属性，允许我们自定义拖动过程中鼠标的类型，其中，dropEffect的值受effectAllowed制约，只能设置effectAllowed允许设置的值。

effectAllowed

effectAllowed只能在dragstart事件中设置，在其他事件中设置不会生效。不同取值代表的含义：

document.addEventListener('dragstart', (e) => {
    e.dataTransfer.effectAllowed = 'none'
}, {
    capture: false,
    passive: false
})

如上设置后，文档上的元素/文本将被禁止拖放。但仍然可以触发除drop以外的一系列的拖动事件。

dropEffect

dropEffect的取值受effectAllowed的制约，只允许被设置effectAllowed指定的值。可能的取值有：move、copy、link、none。dropEffect一般在dragenter和dragover事件中设置，在其他事件中设置也不会生效。

$Ele.addEventListener('dragover', (e) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move|move|copy|link'
}, {
    capture: false,
    passive: false
})

点击这里玩一玩：拖动操作鼠标类型demo

setDragImage

通过该API可以自定义拖动操作中鼠标的背景图片，这个方法必须在dragstart中调用：

const img = new Image()
img.src = './bg.png'
document.addEventListener('dragstart', (e) => {
    e.dataTransfer.setDragImage(img, 5, 5)
}, {
    capture: false,
    passive: false
})

如下图，将文本拖动到输入框，在鼠标底下会紧跟一张背景图片：

dataTransferItem对象

在介绍截取拖动数据之前，有必要先了解下dataTransferItem对象。dataTransferItem对象表示一个拖动数据项，比如拖动的文本、图片等数据。它有两个用于描述数据类型的只读属性，还有用于将dataTransferItem数据转换为对应类型的数据（字符串、文件等）的一系列方法。如下表：

属性/方法 参数 描述
kind 只读 拖动项数据的性质：string/file
type 只读 拖动项数据的MIME类型：image/png等
getAsFile() / 以文件的形式读取拖动项数据，返回一个File对象，非file性质的数据则返回null。
getAsString(call) call：(str) => str 以字符串的形式读取拖动数据，在回调函数中获取字符串数据。

在一个拖动操作中，可能包含了多项数据（比如同时拖动了多个文件），这个时候就需要一个列表去描述这一组拖动数据，这个列表，就是DataTransferItemList对象，这是一个类数组的对象（有一个length属性，只读，还有add()、remove()和clear()等API）。

截取拖动数据

对拖动数据进行劫持一般在dragstart和drop阶段处理，因为这两个阶段的事件都是一次性，不会多次触发，不会造成性能问题。例如，用setData设置固定的文案去覆盖被拖动的文本内容：

document.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', '期望覆盖的文案')
}, {
  capture: false,
  passive: false
})

在drop阶段我们可以截取到拖动数据，然后做二次处理。但对于不同类型的数据截取，会有一些差异。

字符串类型数据

对于字符串类型数据，最简单的是通过getData方法获取（该方法无法获取文件类数据）。例如，获取拖动的纯文本内容：

$Ele.addEventListener('drop', (e) => {
  e.preventDefault()
  console.log(e.dataTransfer.getData('text'))
}, {
  capture: false,
  passive: false
})

这种方式获取的是拖动的纯文本内容： 当然，通过指定字符串的格式，还可以获取富文本内容：

console.log(e.dataTransfer.getData('text/plain'))

这种方式获取的是拖动文案的DOM节点及其祖先节点内容： 另外一种是通过dataTransferItem对象获取，稍后再介绍。

文件类型数据

DataTransfer对象有一个files属性，用于存储拖动文件的列表数据。数据项就是一个File对象数据，可以直接取出。

$Ele.addEventListener('drop', (e) => {
  e.preventDefault()
  const files = e.dataTransfer.files || []
  if(files.length) {
    // do something...
  }
}, false)

从items属性中截取

在前面dataTransfer对象的标准属性中介绍过，items属性的值是一个DataTransferItemList对象，通过for循环从里面逐个取出数据，并判断dataTransferItem的kind属性值作不同的操作：

const transferItems = e.dataTransfer.items
for(let i = 0; i < transferItems.length; i++) {
  const item = transferItems[i]
  if(item.kind === 'string') { // 处理字符串数据
    item.getAsString(str => console.log(str))
  } else if (item.kind === 'file') { // 处理文件数据
    const file = item.getAsFile()
    // ...
  }
}

通过上面的方式截取到拖动数据之后，我们可以根据需要对文件数据进行预览或发送。

File&Blob概述

根据上文可知，通过getAsFile API我们获取到了拖动的文件，返回的是一个File对象。里面包含了文件类型（image/png等）、名字和大小等信息。File对象是特殊类型的Blob，继承了Blob的属性和方法，File里面主要使用的属性有：

属性 备注
name 文件名字
size 文件大小
type 文件MIME类型
lastModified 文件的最后修改时间

Blob是一个不可变、表示原始数据的类文件对象，拥有type和size两个只读属性，可以通过FileReader和Response读取Blob里面的数据。譬如，一个图片文件，被FileReader以不同的数据格式读取：

从规范和内存管理的角度讲，每一次执行createObjectURL，我们需要手动释放内存(但实际应用中影响并不大)：

// 在文件加载就绪之后卸载URL实例的引用
img.onload = function() {
  URL.revokeObjectURL(this.src);
}

Data URL与Blob URL的区别

最后，

参考：