HTNL5新特性 之 拖放

拖放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’);

      }

    原文作者:xiaoyingZha
    原文地址: https://segmentfault.com/a/1190000014479356
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞