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

Posted 2021-10-31 李猫er

在原生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系列事件名	说明
被拖动的元素	drag	ondrag	元素正在被拖动的时候触发
	dragend	ondragend	拖动事件结束时触发（松开鼠标，或者按下escape键）
	dragstart	ondragstart	当用户开始拖动元素或者文本selection时触发
	dragexit	ondragexit	当一个元素不在是drag的选区目标时触发。
目的地对象	dragleave	ondragleave	当拖动元素或seleciton离开有效的drop元素时触发
	dragover	ondragover	当拖动一个元素或seletion通过一个有效的drop元素时触发
	drop	ondrop	当元素或者文本selection在有效的drop元素中松开鼠标时触发
	dragenter	ondragenter	当拖动一个元素或者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事件中调用。