【系列】html5拖拽

1. 在html5之前，网页当中实现拖拽要借助到js中的(onmousedown+onmousemove)，现在html5内部就支持了拖拽的功能，结合js能够极大的方便我们实现拖拽功能，但是此功能仅能支持有限的几款浏览器。

一、html5拖拽实现

1. 创建拖拽对象

①给需要拖拽的元素设置draggable属性，它有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。

2. 处理拖拽事件

①当我们拖拽对象的时候会触发拖拽事件包括：

A.dragstart：当元素拖拽开始触发；

B.drag：在元素拖拽过程中触发；

C.dragend：元素拖拽结束时触发。
注意：在写js时记得加上on。如：one.ondragstart=function(){}

3. 创建投放区

①当拖拽对象进入投放区的时候会触发相关的事件

A.dragenter：当拖拽对象进入投放区时触发；

B.dragover：拖拽对象在投放区内移动时触发；

C.dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；

D.drop：拖拽对象投放在投放区时触发。

②注意：dragenter、dragover、dragleave、drop可能会受到默认事件的影响，所以我们在这些事件当中使用e.preventDefault();来阻止事件默认事件
在写js时记得加上on。如：one.ondragenter=function(){}
函数功能实例

4. 使用dataTransfer传递数据

1.当我们需要拖拽对象向投放区传递数据的时候用到dataTransfer有下面的属性和方法：

1.types：返回数据的格式；

2.getData(<format>)：返回指定格式数据；

3.setData(<format>, <data>)：设置指定格式数据；

4.clearData(<format>)：移除指定格式数据；

5.files：返回已经投放的文件的信息数组。

1.type：文件类型

2.size:文件大小

3.name:文件名

二、html5拖拽异步上传

1.异步ajax

var xml=new XMLHttpRequest();

xml.open("post","1.php");

xml.send(formData);

2.表单数据

var formData=new FormData();

formData.append("aa",DataTransferObj);
拖拽异步上传实例