JS 鼠标拖拽元素移动

开源分享汇

于 2023-12-30 12:41:28 发布

阅读量522

点赞数 9

分类专栏：前端经验项目源码文章标签： javascript 计算机外设开发语言

本文链接：https://blog.youkuaiyun.com/github_38967228/article/details/135304215

版权

前端经验同时被 2 个专栏收录

8 篇文章

订阅专栏

项目源码

5 篇文章

订阅专栏

本文详细介绍了如何使用HTML和JavaScript实现一个简单的鼠标拖拽功能，通过绑定`mousedown`、`mousemove`和`mouseup`事件，允许用户拖动`<div>`元素在页面上移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrap {
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			left: 100px;
			top: 100px;
			z-index: 100;
		}
	</style>
</head>

<body>
	<div id="wrap"></div>
</body>
<script>
	//鼠标拖拽移动
	//1.为div绑定鼠标事件
	//2.将鼠标坐标点与div定位位置进行关联
	wrap.onmousedown = function (e) {
		console.log(e);
		var e = e || window.event;
		//获取按下的位置
		var w = e.clientX;
		var h = e.clientY;
		console.log('获取按下的位置', 'clientX', w, 'clientY', h);
		//获得是鼠标按下时相对于元素的位置
		var ex = w - wrap.offsetLeft;
		var ey = h - wrap.offsetTop;

		document.onmousemove = function (h) {
			var h = h || window.event;
			var w1 = h.clientX;
			var h1 = h.clientY;
			console.log('onmousemove', 'w1', w1, 'h1', h1);
			wrap.style.left = (w1 - ex) + "px";
			wrap.style.top = (h1 - ey) + "px";

		}
	}

	wrap.onmouseup = function () {
		document.onmousemove = null;
	}
</script>

</html>