H5拖放事件解析

H5拖放事件详解

1 拖放 API

H5拖放事件解析_第1张图片
HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MSS0EFAX-1671765395668)(MD文档.assets\drag-1.gif)]

在开发中,我们经常使用原生的 JavaScript 来实现拖放效果,实现起来比较复杂。如何让实现拖放效果变得简单呢?HTML5 为我们提供了更好用的接口和事件,在很大程度上降低了页面中拖放交互的实现难度。

1.1 拖放的概念

拖放的概念:拖放(Drag 和 drop)是 HTML5 标准的组成部分,是页面中的元素从初始位置被拖动到新的位置的用户行为,如拖拽页面中的指定元素到另一个元素中。

拖放过程:首先使用鼠标指针进入源对象,然后按住鼠标左键拖动源对象,当移动鼠标时源对象会跟随鼠标指针移动,如果源对象进入了目标对象,就松开鼠标左键让源对象放置在目标对象中。

源对象:表示被拖动的元素。为元素添加 draggable 属性可以设置此元素为源对象。

目标对象:源对象进入的元素称作目标对象,目标对象可以是页面中的任一元素。

1.2 拖放的浏览器支持

H5拖放事件解析_第2张图片

2 拖拽事件

HTML 的 drag & drop 使用了 DOM event model 以及从 mouse events 继承而来的 drag events

一个典型的拖拽操作是这样的:用户选中一个可拖拽的(draggable)元素,并将其拖拽(鼠标不放开)到一个可放置的(droppable)元素,然后释放鼠标。在操作期间,会触发一些事件类型,有一些事件类型可能会被多次触发(比如 dragdragover 事件类型)。

下面的表格提供了一个简短的事件类型描述:

事件 On 型事件处理程序 触发时刻
drag ondrag 当拖拽元素或选中的文本时触发。
drop ondrop 当元素或选中的文本在可释放目标上被释放时触发。
dragenter ondragenter 当拖拽元素或选中的文本到一个可释放目标时触发。
dragover ondragover 当元素或选中的文本被拖到一个可释放目标上时触发(每 100 毫秒触发一次)。
dragleave ondragleave 当拖拽元素或选中的文本离开一个可释放目标时触发。
dragstart ondragstart 当用户开始拖拽一个元素或选中的文本时触发。
dragend ondragend 当拖拽操作结束时触发(比如松开鼠标按键或敲 “Esc” 键)。

下面通过一个简单的示例来讲解拖放事件:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽事件title>
		<style>
			.box {
				width: 262px;
				height: 46px;
				padding: 15px;
				border: 2px solid #aaaaaa;
			}
		style>
	head>
	<body>
		<div id="div1" class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
			<img id="logo" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="262" height="46">
		div>
		<br />
		<div id="div2" class="box" ondrop="drop(event)" ondragover="allowDrop(event)">div>
		<script>
			function allowDrop(ev) {
				ev.preventDefault();
			}

			function drag(ev) {
				ev.dataTransfer.setData("text/plain", ev.target.id);
			}

			function drop(ev) {
				ev.preventDefault();
				var id = ev.dataTransfer.getData("text/plain");
				ev.target.appendChild(document.getElementById(id));
			}
		script>
	body>
html>

H5拖放事件解析_第3张图片

它看上去也许有些复杂,不过我们可以分别研究拖拽事件的不同部分。

2.1 设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

<img draggable="true" />

2.2 拖动什么 - ondragstart 和 setData()

在上面示例中,ondragstart 属性调用了一个函数 drag(ev),它规定了被拖动的数据。

DataTransfer 对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的 dataTransfer 属性。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev) {
	ev.dataTransfer.setData("text/plain", ev.target.id);
}

text/plain 是一个 DOMString,表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id:logo

2.3 拖放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

function allowDrop(ev) {
	ev.preventDefault();
}

2.4 进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数 drop(event)

function drop(ev) {
	ev.preventDefault();
	var id = ev.dataTransfer.getData("text/plain");
	ev.target.appendChild(document.getElementById(id));
}

你可能感兴趣的:(前端,html,javascript)