前端开发谈谈H5的原生元素拖拽(drap& drop)事件

Posted 李猫er

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发谈谈H5的原生元素拖拽(drap& drop)事件相关的知识,希望对你有一定的参考价值。

在原生h5 中,拖放(drag 和 drop)是 html5 标准的组成部分。它常用于:抓取对象以后拖放到另一个位置。

一个元素的拖放的过程:

选中–>拖动–>释放

选中

  • 在HTML5标准中, draggable是一个全局的枚举属性,它决定了一个元素是否可以被拖动。

draggable 的语法:

<element draggable="true | false | auto" >
  • true: 可以拖动;

  • false:禁止拖动

  • auto:跟随浏览器定义元素是否可以拖动

  • 在web页面中,默认只有text selection,images,links(选中文本、图片、链接)可以被拖动,当一个image或link被拖动时,image或link的url会被设置到drag data中。对于其他元素,必须是selection的一部分才能被拖动。要想所有的元素都能被拖动,需要做三件事情:

  • 1、设置draggable=“true”到元素上。

  • 2、添加dragstart事件监听。

  • 3、在dragstart事件中设置drag data.(通过dataTransfer对象实现)。

常用事件

针对对象事件名on系列事件名说明
被拖动的元素dragondrag元素正在被拖动的时候触发
dragendondragend拖动事件结束时触发(松开鼠标,或者按下escape键)
dragstartondragstart当用户开始拖动元素或者文本selection时触发
dragexitondragexit当一个元素不在是drag的选区目标时触发。
目的地对象dragleaveondragleave当拖动元素或seleciton离开有效的drop元素时触发
dragoverondragover当拖动一个元素或seletion通过一个有效的drop元素时触发
dropondrop当元素或者文本selection在有效的drop元素中松开鼠标时触发
dragenterondragenter当拖动一个元素或者selection进入到一个有效的drop元素中时触发

有了这些drap&drop api事件,我们通过dataTransfer对象设置drag过程中回调函数来处理一些业务逻辑。

注意:dragenter和dragover事件的默认行为是拒绝任何被拖放的元素,因此,我们需要阻止浏览器这种默认行为:ev.preventDefault();

DataTransfer 对象

在drag&drop拖放操作的过程中会触发一个DragEvent对象,属于Dom event的一个子对象,这个对象有一个dataTransfer属性:该属性用于保存拖放的数据和交互信息,返回DataTransfer对象,只读,但其子属性可设置。

dataTransfer的属性:

属性说明
DataTransfer.dropEffect设置或获取当前的拖动操作的属性,值必须是下列之一:none,copy,link,move。
DataTransfer.effectAllowed提供所有可能的操作效果类型,必须是以下的值:copyLink,copyMove,link,linkMove,all,uninitialized.这个属性应该在dragstart中设置,提供dropEffect使用。
DataTransfer.files包含一个dataTransfer中的本地文件的文件列表,如果dragging操作中不设计文件,此属性是一个空列表。
DataTransfer.types返回值dragstart事件中设置的拖动类型的字符串数组。

dataTransfer的方法:

方法说明
DataTransfer.clearData([format])清空给定类型的数据,如果没有传入type,则清空所有数据。如果dataTransfer中没有数据,或者没有对应类型的数据,此方法没有效果。
DataTransfer.getData([format])返回给定类型的数据,如果dataTransfer没有此类型的数据,则返回空字符串。
DataTransfer.setData(format,data)设置给定类型的数据,如果此类型数据不存在,就会添加到最后一列,如果此类型数据已经存在,则会替换已经存在的数据。
DataTransfer.setDragImage(img,xoffset,yoffset)当拖动时会从拖动源创建一个半透明的图片,这个图片是自动创建的。如果需要自定义设置,需要使用这个方法,xoffset,yoffset,是图像距离鼠标指针的位置,此方法通常在dragstart事件中调用。

以上是关于前端开发谈谈H5的原生元素拖拽(drap& drop)事件的主要内容,如果未能解决你的问题,请参考以下文章

H5 拖拽操作

scitersciter 拖拽过程总结

ios&h5混合开发项目仿app页面跳转优化

h5原生拖拽

app内嵌h5页面:前端与原生语言的配合

HTML5拖拽/拖放(drag & drop)详解