拖放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. 夺命雷公狗-----React---15--三元运算符

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  2. [Struts2] Action Implements SessionAware

    struts2 的Action中若希望访问Session对象,可采用两种方式: 1.从ActionContext中获取: 2.实现SessionAware接口. 1.从ActionContext中获取 ...

  3. Objective-C基础4

    1.强指针:默认的情况下所有的指针都是强指针,关键字__strong 弱指针:__week关键字修饰的指针 2.ARC:编译器将自动在代码合适的地方插入retain.release.autorelea ...

  4. 在Excel里用vba给合并的单元格添加注释

    Excel里使用VBA对已经合并的单元格添加注释,直接使用AddComment会报: 运行时错误 '1004':应用程序定义或者对象定义错误 找了很多文章都没找到怎么解决,最后发现在AddCommen ...

  5. SSAS中事实表中的数据如果因为一对多或多对多关系复制了多份,在维度上聚合的时候还是只算一份

    SSAS事实表中的数据,有时候会因为一对多或多对多关系发生复制变成多份,如下图所示: 图1 我们可以从上面图片中看到,在这个例子中,有三个事实表Fact_People_Money(此表用字段Money ...

  6. PHP文件操作:遍历文件目录

    <?php /*遍历目录,列出目录中的文件 * array scandir(string $directory [,int $sorting_order]) * $directory为待遍历目录 ...

  7. [转]Android SDK更新 Connection to http://dl-ssl.google.com refused 解决方法

    问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com/android/repository/repository ...

  8. chrome + vi

    vimer们福利,一款能在chrome上面使用vim快捷键的插件 http://myhozz.com/2014/10/25/use-vim-in-chrome/

  9. Dokuwiki布署小记

    最近个人写作风格全面转向Markdown模式,但之前使用的Mediawiki并未原生支持,且本人在布署时为了实现其所见即所得的方案和别的一些个性化需求,添加了太多插件和自定义设置,两年多过去了,很多设 ...

  10. 关闭编辑easyui datagrid table

    var rows = dg.datagrid('getRows');    for (var i = 0; i < rows.length; i++) {        dg.datagrid( ...