H5拖放事件解析

芮森

已于 2022-12-23 11:36:00 修改

阅读量671

点赞数

文章标签：前端 html javascript

于 2022-12-23 11:35:38 首次发布

本文链接：https://blog.csdn.net/weixin_57999341/article/details/128417598

版权

H5拖放事件详解

1 拖放 API

在这里插入图片描述
HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

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

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

1.1 拖放的概念

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

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

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

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

1.2 拖放的浏览器支持

在这里插入图片描述

2 拖拽事件

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

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

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

事件	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>

在这里插入图片描述

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

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));
}

芮森

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5拖放事件解析

（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。
复制链接

扫一扫