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


html5拖拽实现
1. 创建拖拽对象
①给需要拖拽的元素设置draggable属性，它有三个值：
true：元素可以被拖拽；false：元素不能被拖拽；auto：
浏览器自己判断元素是否能被拖拽。
2. 处理拖拽事件
① 当我们拖拽对象的时候会触发拖拽事件包括：
A.dragstart：当元素拖拽开始触发；
B.drag：在元素拖拽过程中触发；
C.dragend：元素拖拽结束时触发。


html5拖拽实现
3. 创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter：当拖拽对象进入投放区时触发；
B.dragover：拖拽对象在投放区内移动时触发；
C.dragleave：拖拽对象没有投放到投放区，离开投放区的
时候触发；
D.drop：拖拽对象投放在投放区时触发。
②注意：dragenter、dragover可能会受到默认事件的影
响，所以我们在这两个事件当中使用
e.preventDefault();来阻止事件默认事件


html5拖拽实现
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);

更多精彩课程，我们下期再会www.028cube.com

 本信息来源于：成都数字立方信息技术有限公司 www.028cube.com 网站建设，网站设计，成都网站建设，成都网站制作，网站建设公司，网站设计公司