HTNL5新特性 之 拖放

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘);

      }

以上是关于HTNL5新特性 之 拖放的主要内容,如果未能解决你的问题,请参考以下文章

Angular 7.0发布,带来CLI Prompts虚拟滚动和拖放等特性

Androd7.0-新特性

HTML5新增特性

iOS11开发新特性之Xcode9 新特性

html5新特性之画布

c++11 新特性之 autokeyword