上一篇介绍了拖拽的基础知识，这节我们谈谈拖拽的一些应用
HTML5不仅仅定义了拖拽的事件类型，还在事件对象中规范了一个重量级的对象：dataTransfer,借助它，我们可以实现数据传输、拖拽图案设定、拖拽文件上传，可通过event.dataTransfer来访问该对象.
数据的传输需要借助event.dataTransfer对象的一些方法实现。通过setData(dataType:string,data:string)来设置待传输的数据，通过getData(dataType:string)来获取传送的数据.可设置文本、html类型、url类型等。 步骤如下：
dragstart ，设置数据drop，获取并访问数据。 let dragEle = document.querySelector('#drag-ele');let dropTarget = document.querySelector('#drop-target');dragEle.addEventListener('dragstart',event=>{event.dataTransfer.setData('text/plain','i love you')})dropTarget .addEventListener('dragover',event=>{//取消默认事件，激活dropevent.preventDefault();})dropTarget .addEventListener('drop',event=>{let data = event.dataTransfer.getData('text/plain');console.log(data);// 'i love you'})复制代码 自定义拖拽效果在拖拽过程中，浏览器默认了一些效果，可以通过设置dataTransfer的一些属性或方法达到美观效果。
指定一张图片，在拖拽中跟随鼠标dragstart阶段配置：setDragImage(img:element,offsetX:number,offsetY:number)
let imgEle = document.querySelector('#img-ele')dragEle.addEventListener('dragstart',event=>{//计算图片的高度和宽度的一半，作为x、y轴的偏移，使图片居中 var offsetX = parseFloat(getComputedStyle(imgEle ).width)/2; var offsetY = parseFloat(getComputedStyle(imgEle ).height)/2; event.dataTransfer.setDragImage(imgEle ,offsetX,offsetY);})复制代码 小图标提示此处意义不是特别大，一般默认就行了。
允许释放的类型（仅作为提示效果，并不做真正的限制）.
首先设置拖动元素的允许效果（effectAllowed）其次设置释放元素的释放效果（dropEffect）允许效果应该在释放效果之内:比如effectAllowed=copy,那么dropEffect必须包含copy才行（可以为copy，也可为all表示包含所有） dragEle.addEventListener('dragstart',event=>{event.dataTransfer.effectAllowed = 'copy';//设置复制类型})dropTarget .addEventListener('dragover',event=>{//取消默认事件，激活dropevent.preventDefault();})dropTarget .addEventListener('drop',event=>{event.dataTransfer.dropEffect = 'copy';//必须允许上面设置的copy类型//设置为all允许所有，也是ok的。})复制代码 拖拽上传文件拖拽上传功能应该是最有用的了，本文使用formData上传文件。以express举例说明。 与普通拖拽并无二致，可以从桌面、资源管理器中拖动文件释放到对应的元素上。
注意：
拖动文件到浏览器中，浏览器会默认打开该文件，需要手动阻止该默认行为。在dragover、drop中阻止默认行为：preventDefault.drop后直接打印event.dataTransfer看到files属性为空，但是直接访问该属性是可以拿到文件内容的 dragTarget.addEventListener('dragover',event=>{//阻止默认行为event.preventDefault();})dragTarget.addEventListener('drop',event=>{//阻止文件打开默认行为event.preventDefault();let file = event.dataTransfer.files[0];var formData = new FormData();formData.append('book',file);var xhr = new XMLHttpRequest();xhr.open('post','http://localhost:8080/profile');xhr.send(formData)})复制代码关于后端express的代码上传到了github，如需要请自取。
总结拖拽事件对象的dataTransfer对象，都是些实用的功能，不复杂，写几遍应该都能掌握。囿于水平有限，勘误在所难免，望读者朋友留言指正交流，谢谢啦！