拖拽其实没有那么难

前言

大家是否在个人开发或者公司项目中遇到过拖拽相关的需求呢？之前我从未处理过这块的内容，碰巧上回接到了这么一个拖拽的需求。当时心里一咯噔："完了！这个我没有处理过，不会啊！😭"。

不过在真正去了解了一下这块的内容，发现其实拖拽也没有我们想象的那么难（对于web端来说）。现在原生对于拖拽的支持已经非常好了。

效果

我们来看这么一个效果：在线预览

第一眼看着是不是觉得还有点复杂，监听鼠标按下事件，监听鼠标移动，监听鼠标放开，想想就害怕，但其实并不是，代码只有这么几行：

html 复制代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>拖拽demo</title>
		<style>
			body {
				display: flex;
			}
			.box1,
			.box2 {
				width: 300px;
				height: 600px;
				border: 1px solid #ccc;
			}
			.box2 {
				margin-left: 50px;
			}

			.item {
				width: 100px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: skyblue;
				margin-top: 10px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="item" draggable="true" ondragstart="dragStart(event,'手机')">
				手机
			</div>
			<div class="item" draggable="true" ondragstart="dragStart(event,'电脑')">
				电脑
			</div>
			<div class="item" draggable="true" ondragstart="dragStart(event,'耳机')">
				耳机
			</div>
		</div>
		<div
			class="box2"
			ondrop="dropEnd(event)"
		></div>
	</body>

	<script>
		const box2 = document.querySelector('.box2')
		function dragStart(e, device) {
			e.dataTransfer.setData('device', device)
		}
		function dropEnd(e) {
			var transferredDevice = e.dataTransfer.getData('device')
			const div = document.createElement('div')
			div.textContent = transferredDevice
			div.classList.add('item')
			box2.appendChild(div)
		}
	</script>
</html>

核心就是这两步：

给需要拖拽的元素加上draggable = true 的属性，同时设置ondragstart的事件处理函数

可以通过句柄e中以key,value存储我们想要存储的数据

e.dataTransfer.setData('device', device)
给可放下拖拽的容器设置ondrop放手事件处理函数

可以通过句柄e获取我们之前存储的数据

基于以上的两步我就可以完成一个拖拽的任务了。

兼容性

在caniuse中我们也得知，大部分主流的浏览器其实都是已经支持的了。

总结

拖拽其实没有我们想象的那么难了，之前没有这个api之前可能就相对复杂要处理各种鼠标事件，现在一个api就完成了，在不需要考虑兼容性的情况下还是可以放心大胆的使用的~😄

拖拽其实没有那么难

拖拽其实没有那么难

前言

效果

兼容性

总结

相关链接