手记

老生常谈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:用于向向文件写出内容

3人推荐
随时随地看视频
慕课网APP