HTML5原生拖拽/拖放 Drag & Drop 详解

40 min read

HTML5原生拖拽/拖放Drag & Drop是在网页中实现元素拖拽和拖放的一种新的方式，与以前的JavaScript实现方式不同，它使用了HTML5、CSS3和JavaScript，它标准化了拖放的方式，大大简化了代码，使得开发者能够很容易地实现复杂的拖拽交互效果。

拖拽被分为3个主要部分：拖动源元素（drag source）、放置目标元素（drag target）和数据传输（data transfer）。在HTML5中，对于拖动源元素和放置目标元素，我们可以通过给它们添加draggable属性来标记它们为可拖动和可放置的元素。对于数据传输，我们可以在dragstart事件中使用DataTransfer对象来存储需要传输的数据，之后在drop事件中获取这些数据。

下面是一个简单的实现拖动源元素和放置目标元素的例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Drag and Drop</title>
	<style>
		#drag {
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 20px;
			cursor: move;
		}

		#drop {
			width: 300px;
			height: 200px;
			background-color: blue;
			margin: 20px;
		}

	</style>
</head>
<body>

	<div id="drag" draggable="true"></div>
	<div id="drop" droppable="true"></div>

	<script>
		var drag = document.getElementById("drag");
		var drop = document.getElementById("drop");

		drag.addEventListener("dragstart", function(e) {
			e.dataTransfer.setData("text/plain", "This is some data");
		});

		drop.addEventListener("dragover", function(e) {
			e.preventDefault();
		});

		drop.addEventListener("drop", function(e) {
			e.preventDefault();
			var data = e.dataTransfer.getData("text/plain");
			alert(data);
		});

	</script>

</body>
</html>

在这个例子中，我们添加了一个可拖动的红色方块和一个可放置的蓝色方块。当我们拖动红色方块时，会触发dragstart事件，我们可以在这个事件中将需要传输的数据存储到DataTransfer对象中。当我们把红色方块拖放到蓝色方块上时，会触发drop事件，我们可以在这个事件中获取DataTransfer对象中的数据。

除了以上例子中常用的dragstart、dragover和drop事件外，拖拽还有一些其他的事件。例如：

  • dragenter：当拖动的元素进入放置目标时触发。
  • dragleave：当拖动的元素离开放置目标时触发。
  • dragend：当拖动的元素结束拖拽时触发。

需要注意的是，现代浏览器中对于拖拽的支持并不完全一致，例如在Internet Explorer 9以及以下版本中并不支持HTML5原生拖拽/拖放。因此，在使用这个功能时需要格外注意兼容性问题。