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. ...
随机推荐
- java基础复习:final,static,以及String类
2.final 1)为啥String是final修饰的呢? 自己答: 答案: 主要是为了“效率” 和 “安全性” 的缘故.若 String允许被继承, 由于它的高度被使用率, 可能会降低程序的性能,所 ...
- NIO SelectionKey中定义的4种事件
SelectionKey.OP_ACCEPT —— 接收连接继续事件,表示服务器监听到了客户连接,服务器可以接收这个连接了 SelectionKey.OP_CONNECT —— 连接就绪事件,表示客户 ...
- 【转】【RDS教程】专业DBA速成 - CPU优化篇
来源:http://bbs.aliyun.com/read/160831.html?spm=5176.7189909.0.0.0thneM&displayMode=1&page=1&a ...
- DELPHI实现百度开放平台
学习百度语音 百度语音开发平台 http://yuyin.baidu.com/ 百度开发者账号 13600514494,短信登录 应用账号 词语听写 App ID: 7799366 API Key: ...
- 阿里yum源
转:http://mirrors.aliyun.com/help/centos?spm=5176.bbsr150321.0.0.d6ykiD 1.备份 mv /etc/yum.repos.d/Cent ...
- 学习Linux系列--Python资源收集
本系列文章记录了个人学习过程的点点滴滴. 回到目录 玩Linux,不懂一门脚本语言是不行的,我这里选择的是Python. 10.入门资源 下面前三遍是比较系统的文档,后面是一些心得,我看了好几天,终于 ...
- [课程设计]Scrum 3.8 多鱼点餐系统开发进度(留言反馈系统设计)
Scrum 3.8 多鱼点餐系统开发进度(留言反馈系统设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统 ...
- 阅读javascript高级程序设计
第一章 : javascript的简介: js的组成: 1.核心(ECMA) ECMA规定了js的 1,语法 2,保留字 3,关键字, 4,对象, 5,类型 6,操作符 7,语句 2.文档对象模型(D ...
- Metro-Ural119递推
Time limit: 0.5 second Memory limit: 64 MB Many of SKB Kontur programmers like to get to work by Met ...
- table 标签
<table border="1" width="100%"> <thead align="left"> <t ...