码迷,mamicode.com
首页 > 其他好文 > 详细

HTNL5新特性 之 拖放

时间:2020-05-01 00:45:28      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:保存数据   注意   默认   targe   好的   进入   target   事件   使用   

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

      }

HTNL5新特性 之 拖放

标签:保存数据   注意   默认   targe   好的   进入   target   事件   使用   

原文地址:https://www.cnblogs.com/homehtml/p/12811754.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!