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. ...
随机推荐
- PHP日常开发工具-Sublime应用
工欲善其事,必先利其器.这里我推荐Sublime Text3做为PHP编辑器,以下简称为ST3,因为不仅系统资源占用小.打开快速,并且还有如下优点: 插件多,类似Emmet信手拈来,非常顺手. UI很 ...
- matlab画柱状图
论文中需要画图进行比较,感觉还是matlab画起来比较方便,先把自己画的图及matlab代码放上. y=[300 311;390 425; 312 321; 250 185; 550 535; 420 ...
- cherrypy应用探究
1. cherrypy是什么? cheerypy是一个有pythonic特性的面向对象的http服务框架. 玩python的人都应该知道pythonic这个单词.python大神给我们的建议 : &g ...
- MS CRM 2013 Plugin 注册工具登录后空白
解决办法 把en-us, zh-CN 目录随便改个名字就好了
- [转]struct.pack 用法手记
原文:http://hi.baidu.com/tibelf/item/8b463d15edfdf10bd1d66d83 看到在进行c格式的二进制文件读取的过程中,用到了struct.unpack方法, ...
- centos7 shell脚本实现随机数
questions: 1.随机数如何获得 2.如何确定随机值的大小是我们所需要的 answers: 1.目前可以通过获取系统时间的毫秒数来得到,毕竟毫秒数还是变化比较快的 可以看到这个速度还是变化很快 ...
- 《利用python进行数据分析》读书笔记--第九章 数据聚合与分组运算(一)
http://www.cnblogs.com/batteryhp/p/5046450.html 对数据进行分组并对各组应用一个函数,是数据分析的重要环节.数据准备好之后,通常的任务就是计算分组统计或生 ...
- (10) 深入了解Java Class文件格式(九)
转载:http://blog.csdn.net/zhangjg_blog/article/details/22432599 经过前八篇关于class文件的博客, 关于class文件格式的内容也基本上讲 ...
- js 两个滚动事件相互影响
document.addEventListener('scroll', function(event) { if (event.target.id === 't_r_content') { // or ...
- 使用AFNetWorking 实现以Basic Authentication方式获取access-token
由于服务器端对于调用API获取数据接口进行了限制,需要在调用API之前获取一个access-token,所以需要在iOS里实现获取这个access-token的功能. 服务器端是在ASP.NET中基于 ...