HTML5 十大新特性(七)——拖放API
拖放API是H5专门为了鼠标拖放而新提供了7个事件,可以分成三个部分来讲。
一、拖动的源对象(source)可以触发的事件
dragstart:拖动开始
drag:拖动进行中
dragend:拖动结束
二、拖动的目标对象(target)可以触发的事件
dragenter:拖动进入时
dragover:源对象在目标对象上方时
dragleave:拖动离开时
drop:鼠标释放时
*特别注意的一点是,如果想触发drop事件,必须阻止dragover的默认行为
三、源对象和目标对象间的数据传递
当然可以使用全局变量,这里要讲的是一种更好的方法——使用拖放事件的dataTransfer属性
例:源对象保存数据:
source.onxxx=function(e){
e.dataTransfer.setData('key','value');
};
目标对象接收数据:
target.onxxx=function(e){
e.dataTransfer.getData('key');
}
HTML5 十大新特性(七)——拖放API的更多相关文章
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- HTML5 十大新特性(十)——Web Socket
webSocket是H5新加的一个协议,为了解决http协议的request.response一一对应和它自身的被动性,以及ajax轮询等问题.一方可以发送多条信息,连接不中断,永久连接,但也导致了服 ...
- HTML5 十大新特性(八)——Web Worker
由于js是单线程的,所以H5添加了这个叫做webWorker的概念,允许js创建多个线程,但是子线程完全受主线程控制,且不能操作DOM,从而来处理一些比较耗时的操作. 那么如何创建一个子线程呢?通过这 ...
- HTML5 十大新特性(六)——地理定位
简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...
- HTML5 十大新特性(三)——视频和音频
一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...
- HTML5 十大新特性(一)——语义标签
说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发 ...
- HTML5 十大新特性(九)——Web Storage
H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...
- HTML5 十大新特性(五)——SVG绘图
相对于canvas绘图,SVG是一种绘制矢量图的技术.全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身.需要 ...
- HTML5 十大新特性(四)——Canvas绘图
H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...
随机推荐
- CentOS 6.5下Zabbix的安装配置
1.确保开发环境lamp已经安装 2.下载zabbix 官方下载地址:http://www.zabbix.com/download.php 选择和自己系统对应的版本,这里选择安装与Linux内核为2. ...
- 简单封装数据请求(iOS)
#import <Foundation/Foundation.h> //给block起 别名 //类型 void(^)(BOOL success , id data) //别名是 Comp ...
- [转]Google Guava官方教程(中文版)
Google Guava官方教程(中文版) http://ifeve.com/google-guava/
- JavaScript中const、var和let区别浅析
在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...
- ISO学习中代码截图
自定义插件 1.使用时的调用方法 导入头文件,创建对象,设置尺寸,传入数据: 2,内部方法的实现 XMGPageView.m XMGPageView.h XMGPageView.xib 注意点 自定义 ...
- iOS·UIButton如何文字在下图片在上
创建子类继承自UIButton,在layoutSubviews方法中改变文字和图片的位置就可以了,同理,稍作改变,可以写出文字在上图片在下.本文只给出文字在下图片在上的代码 -(void)layout ...
- Nginx的安装配置
1.安装PCRE库 $ cd /usr/local/ $ https://sourceforge.net/projects/pcre/files/pcre/8.36/ $ tar -zxvf pcre ...
- android 悬浮覆盖状态栏的相关建议
WindowManager.LayoutParams.TYPE_SYSTEM_ERROR 显示在所有的应用之上包括显示在状态栏上,相对于TYPE_SYSTEM_OVERLAY不能获取焦点更为理想. 另 ...
- File相关的读取和写入以及复制
import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileI ...
- linux问题
make:进入目录'/opt/FriendlyARM/tiny4412/05android/android-4.1.2'target Dex: framework trouble writing ou ...