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小森森阅读(62) 评论(2) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript调用系统邮件快速分享

· JS 根据文件Magic Number判断文件是否是图片

· 用JavaScript实现拖拽效果

· js 实现元素拖拽

· JS实现拖拽元素+封装拖拽方法

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

公告

合作微信：lx2834234457 （请备注来自「博客园」不备注来源和目的不加）

昵称： LiangSenCheng小森森
园龄： 5年9个月
粉丝： 15
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类 (11)

经验分享(11)

LiangSenCheng博客

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

小森森博客

LiangSenCheng博客

JS 鼠标拖拽元素移动

代码示例

效果预览

原文链接

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (11)

随笔档案 (29)

相册 (2)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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