HTML5中的拖放功能 | 打卡每天一份劝退技能

前言

如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，接收好挑战了吗？笔芯❤️~

知识点

拖拽的体验，你享受过吗，在HTML5之前，可以使用事件mousedown，mousemove，mouseup巧妙实现页面的拖放操作，但注意拖放的操作范围只是局限在浏览器内部。

而HTML5的拖放API功能直接实现拖放操作，而且拖放的范围已经超出浏览器的边界，HTML5提供的文件api支持拖拽多个文件并上传。

要学会掌握html5中的拖放api和 文件api，光标拖放事件，从web网页上访问本地文件系统。

拖放api

在html5中的拖放api重点：

第一，为页面元素提供了拖放特性；

第二，为光标增加了拖放事件；

第三，提供了用于存储拖放数据的DataTransfer对象

draggable特性

draggable特性用于定义元素是否允许用户拖放：提供了三个值

true,false,auto

把元素变成可以拖放的：

<div draggable="true"></div>
复制代码

img元素和a元素默认是可以拖放的

光标拖放事件

在html5中提供了7个与拖放相关的光标事件：

按照时间的顺序：

第一，开始拖拽时触发的事件，事件的作用对象是被拖拽的元素-dragstart事件

第二，拖放过程中触发的事件，事件的作用对象是被拖拽的元素-drag事件

第三，在拖放的元素进入本元素的范围内时触发，事件的作用对象是拖放过程中光标经过的元素-dragenter元素

第四，在拖放的元素正在本元素的范围内移动时触发，事件的作用对象是拖放过程中光标经过的元素-dragover元素

第五，在拖放的元素离开本元素的范围时触发，事件的作用对象是拖放过程中光标经过的元素-dragleave元素

第六，在拖放的元素被拖放到本元素中时触发，事件的作用对象是拖放的目标元素-drop元素

第七，在拖放操作结束时触发，事件的作用对象是被拖拽的元素-dragend事件

DataTransfer对象

在html5中提供了DataTransfer对象，用来支持拖拽数据的存储。

实现拖放的过程中数据交换。

DataTransfer对象：

属性

第一，dropEffect属性：用来设置或获取拖拽操作的类型 和 要显示的光标类型。

如果该操作的效果与起初设置的effectAllowed效果不符，则拖拽操作失败。可以设置修改，包含值可为：none, copy, link, move

第二，effectAllowed属性：用来设置或获取数据传送操作可应用于操作对象的源元素，指定值：none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized

第三，type属性：获取在dragstart事件出发时为元素存储数据的格式，如果是外部文件的拖拽，则返回Files。

第四，files属性：获取存储在DataTransfer对象中的正在拖放的文件列表FileList，可以使用数组的方式去遍历。

方法

第一，clearData()方法：清除DataTransfer对象中存放的数据：

clearData([sDataFormat])
复制代码

[sDataFormat]