Electron拖拽下载能力

1. h5 dragDrop简单介绍

dragdrop 是H5标准的新特性之一，针对每个HTML元素，可以设置一个draggable属性，true表示这个元素能够拖拽，false反之。对于能拖拽的元素，其能够响应‘dragstart’,‘dragover’,‘dragenter’,‘dragleave’,‘dragend’事件，通过addEventListener可以获取相应的拖拽操作。每个事件提供event参数，在dragdrop场景下，多了dataTransfer属性，dataTransfer包含了拖拽相关的数据信息，例如：

  dragEffect: ['copy','move','link','none'], 表示dropEffect将被初始化成期望的动作
  effectAllowed:['copy','copymove',....] , 用来指定拖动时被允许的效果
  files,拖拽包含的文件列表，如果不涉及文件，那么这个列表为空
  setDragImage(imgElement,x,y), 设置拖拽时的图片
  setData(type,data),  设置拖拽时的数据信息，type是MIME字符串，例如text/plain
  getData(type), 返回对应类型的数据信息

2. 拖拽下载的实现

拖拽下载的难点在于：从web页面拖拽出去后，无法感知拖拽的目标地址，因此无法实现下载。因此拖拽下载的问题可以简化为如何感知drop的目标路径。

Electron中使用的内核是Chrome，而chrome在DragDrop setData(dataTransfer 属性之一) 新增了 DownloadURL类型，其作用是将一个已知类型的元素（如图片，octet-stream等拖拽到desktop指定位置）

Chrome: dataTransfer.setData('DownloadURL',[mime]:[filename]:[uri])

我们则可以利用这个特性，拖拽行为产生时，我们通过setData在本地创建一个文件，然后通过electron 调用native模块来监控本地文件的创建，只要能监控到本地文件的创建，那么我们就可以实现下载。

更多内容请访问个人博客, 谢谢： https://pinkcle.com/electron/dragdrop.html

转载需注明出处，请联系作者，谢谢。