;

LiangSenCheng博客

接受小程序定制「包括但不限于课设、毕设等，急单不接、二手单不接」

JS 鼠标拖拽元素移动

代码示例

<!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>

效果预览

原文链接

JS 鼠标拖拽元素移动

posted @ 2023-12-30 12:40  LiangSenCheng小森森  阅读(60)  评论(2)  编辑  收藏  举报