webAPI 鼠标拖拽demo

最新推荐文章于 2022-03-20 23:10:14 发布

x辉

最新推荐文章于 2022-03-20 23:10:14 发布

阅读量192

点赞数

分类专栏： WEBAPI 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38013624/article/details/104057260

版权

WEBAPI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

鼠标拖拽示例

简述
- 功能描述
- 代码

简述

该示例为鼠标拖拽的简单实现案例

功能描述

鼠标在拖动区域按下时, 拖动盒子, 盒子跟随鼠标移动
鼠标松开时, 取消关联

代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标拖拽练习demo</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="box">
			<div id="box-hand">拖拽区域</div>
		</div>
	</body>
</html>
<script>
	// 鼠标按下时, 拖动盒子, 盒子跟随鼠标移动
	// 鼠标松开时, 取消关联
	// 关键点获取鼠标按下时, 鼠标在盒子中的位置, 在按下移动过程中鼠标相对盒子静止
	
	// 获取盒子元素
	const box = document.getElementById("box");
	// 获取盒子拖拽区域元素
	const drop = document.getElementById("box-hand");
	drop.onmousedown = function (e) {
		// 处理浏览器兼容问题
		e = e || window.event;
		// 鼠标按下时, 获取数据在盒子中的位置
		//  鼠标在盒子中的位置 = 鼠标在页面的位置 - 盒子在页面的位置
		console.log(box)
		const x = e.pageX - box.offsetLeft;
		const y = e.pageY - box.offsetTop;
		
		// 鼠标移动
		document.onmousemove = function (e) {
			// 处理浏览器兼容问题
			e = e || window.event;
			// 获取盒子的坐标
			// 盒子坐标 = 鼠标当前在页面的位置  - 鼠标在盒子中的位置
			const boxX = e.pageX - x;
			const boxY = e.pageY - y;
			
			// 重置盒子位置, 使盒子相对鼠标静止
			box.style.left = boxX + 'px';
			box.style.top = boxY + 'px';
		}
	}
	
	drop.onmouseup = function (e) {
		// 处理浏览器兼容问题
		e = e || window.event;
		// 鼠标松开时, 移除鼠标事件
		document.onmousemove = null;
	}

</script>

-index.css


#box{
	margin: auto;
	width: 400px;
	height: 300px;
	background-color: darkgray;
	position: absolute; // 需要改变盒子坐标必须脱离文档流
}

#box-hand {
	width: 100%;
	height: 35px;
	color: beige;
	line-height: 35px;
	background-color: cadetblue;
	cursor: move;
}

x辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webAPI 鼠标拖拽demo

鼠标拖拽示例简述功能描述代码简述该示例为鼠标拖拽的简单实现案例功能描述鼠标在拖动区域按下时, 拖动盒子, 盒子跟随鼠标移动鼠标松开时, 取消关联代码index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>鼠标拖拽练习...
复制链接

扫一扫