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. ...
随机推荐
- 【原创】如何在Android Studio下调试原生安卓Framework层面的源代码
1. Open Existing Android Studio Project. 2. 打开后, Projects -> Android 里面是空的. 这时候,需要选到 Projects-> ...
- JavaScript中的apply和call函数详解(转)
每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,J ...
- python之信用卡ATM(第五天)
本节作业 作业需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日, ...
- Ubuntu14.04_64位使用过程
1. vmware10 下安装 ubuntu(ps:安装过程中还是将磁盘整的更大一些的好,我最开始20G,不够用啊不够用[典型安装就行]) 2. 右上角的圆圈设置--选择system setting- ...
- 8. apache服务实验笔记
Apache服务器 一 简介 1 www:world wide web 万维网 http 协议: 超文本传输协议 HTML语言: 超文本标识语言 2 URL:统一资源定位 协议+域名:端口+网页文 ...
- Bug跟踪方法
Bug跟踪函数调用方法 StackTraceElement mSte = new Exception().getStackTrace()[1]; Log.e("mmm", mSt ...
- vue transition
Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...
- Java 异常处理 练习2
建立exception包,建立Bank类,类中有变量double balance表示存款,Bank类的构造方法能增加存款,Bank类中有取款的发方法withDrawal(double dAmount ...
- location对象说明
在浏览器的console层输入 location 即可输出该对象的相关信息 location.protocol 协议类型 http/https location.hostname 主机名 loc ...
- 学生信息管理系统(cocos2d引擎)——数据结构课程设计
老师手把手教了两天半,看了一下模式,加了几个功能就大功告成了!!! 给我的感想就是全都是指针! 添加图片精灵: CCSprite* spBG = CCSprite::create("&qu ...