拖放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的更多相关文章

  1. HTML5 十大新特性(二)——表单新特性

    H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

  2. HTML5 十大新特性(十)——Web Socket

    webSocket是H5新加的一个协议,为了解决http协议的request.response一一对应和它自身的被动性,以及ajax轮询等问题.一方可以发送多条信息,连接不中断,永久连接,但也导致了服 ...

  3. HTML5 十大新特性(八)——Web Worker

    由于js是单线程的,所以H5添加了这个叫做webWorker的概念,允许js创建多个线程,但是子线程完全受主线程控制,且不能操作DOM,从而来处理一些比较耗时的操作. 那么如何创建一个子线程呢?通过这 ...

  4. HTML5 十大新特性(六)——地理定位

    简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...

  5. HTML5 十大新特性(三)——视频和音频

    一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...

  6. HTML5 十大新特性(一)——语义标签

    说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发 ...

  7. HTML5 十大新特性(九)——Web Storage

    H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...

  8. HTML5 十大新特性(五)——SVG绘图

    相对于canvas绘图,SVG是一种绘制矢量图的技术.全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身.需要 ...

  9. HTML5 十大新特性(四)——Canvas绘图

    H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...

随机推荐

  1. PHP日常开发工具-Sublime应用

    工欲善其事,必先利其器.这里我推荐Sublime Text3做为PHP编辑器,以下简称为ST3,因为不仅系统资源占用小.打开快速,并且还有如下优点: 插件多,类似Emmet信手拈来,非常顺手. UI很 ...

  2. matlab画柱状图

    论文中需要画图进行比较,感觉还是matlab画起来比较方便,先把自己画的图及matlab代码放上. y=[300 311;390 425; 312 321; 250 185; 550 535; 420 ...

  3. cherrypy应用探究

    1. cherrypy是什么? cheerypy是一个有pythonic特性的面向对象的http服务框架. 玩python的人都应该知道pythonic这个单词.python大神给我们的建议 : &g ...

  4. MS CRM 2013 Plugin 注册工具登录后空白

    解决办法 把en-us, zh-CN 目录随便改个名字就好了

  5. [转]struct.pack 用法手记

    原文:http://hi.baidu.com/tibelf/item/8b463d15edfdf10bd1d66d83 看到在进行c格式的二进制文件读取的过程中,用到了struct.unpack方法, ...

  6. centos7 shell脚本实现随机数

    questions: 1.随机数如何获得 2.如何确定随机值的大小是我们所需要的 answers: 1.目前可以通过获取系统时间的毫秒数来得到,毕竟毫秒数还是变化比较快的 可以看到这个速度还是变化很快 ...

  7. 《利用python进行数据分析》读书笔记--第九章 数据聚合与分组运算(一)

    http://www.cnblogs.com/batteryhp/p/5046450.html 对数据进行分组并对各组应用一个函数,是数据分析的重要环节.数据准备好之后,通常的任务就是计算分组统计或生 ...

  8. (10) 深入了解Java Class文件格式(九)

    转载:http://blog.csdn.net/zhangjg_blog/article/details/22432599 经过前八篇关于class文件的博客, 关于class文件格式的内容也基本上讲 ...

  9. js 两个滚动事件相互影响

    document.addEventListener('scroll', function(event) { if (event.target.id === 't_r_content') { // or ...

  10. 使用AFNetWorking 实现以Basic Authentication方式获取access-token

    由于服务器端对于调用API获取数据接口进行了限制,需要在调用API之前获取一个access-token,所以需要在iOS里实现获取这个access-token的功能. 服务器端是在ASP.NET中基于 ...