老生常谈H5新特性:拖放API

老生常谈H5新特性
HTML5新特性
1.新的语义标签
2.表单2.0
3.视频和音频
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.WebWorker
9.WebStorage
10.WebSocket

1.HTML5新特性—— 拖放API

Drag：拖动
Drop：释放
在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。

(1)拖动的源对象(source)可以触发的事件：
dragstart：拖动开始
drag：拖动进行中
dragend：拖动结束
源对象的拖动过程：dragstart x 1 + drag x n + dragend x 1
(2)拖动的目标对象(target)可以触发的事件：
dragenter：拖动着进入
dragover：拖动着在目标对象上方
dragleave：拖动着离开
drop：松手/释放/松开
目标对象的进入/离开过程：
dragenter x 1 + dragover x n + dragleave x 1
目标对象的进入/释放过程：
dragenter x 1 + dragover x n + drop x 1
注意：必须阻止dragover的默认行为！否则drop事件无法触发！

2.如何在拖动的源对象和目标对象间传递数据

如何在7个事件间传递数据？
源对象事件——3个：
目标对象事件——4个：
(1)方法一：使用全局变量 —— 全局对象污染
(2)方法二：使用拖放事件对象的dataTransfer属性
说明：dataTransfer，用作数据传递/转移，看作“拖拉机”
源对象触发事件时保存k-v数据：
src.onxxx = function(e){
e.dataTransfer.setData( 'key', 'value' );
}
目标对象触发事件时获取k-v数据：
target.onxxx = function(e){
var value = e.dataTransfer.getData( 'key' )
}

3.如何在服务器端下载的网页中显示客户端图片？

一般情况下，网页只能显示服务器上的图片；
HTML5中，可以实现用户拖拽一张本地的图片显示在服务器端下载的网页中。
container.ondrop = function(e){
var f0 = e.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(f0);
reader.onload = function(){
///读取完成，数据在reader.result中
}
}
HTML5中提供的用于文件输入输出(I/O)的对象：
File：代表一个文件/目录对象
FileList：代表一个文件列表（类数组对象）
FileReader：用于从文件中读取内容
FileWriter：用于向向文件写出内容