一文教你如何用JS代码来操作元素拖拽移动的效果

苏百玖

已于 2022-11-13 15:25:08 修改

阅读量3.5k

点赞数 1

文章标签： javascript html

于 2022-11-12 16:54:21 首次发布

本文链接：https://blog.csdn.net/SuBaijiu/article/details/127821556

版权

一、先看要执行后的效果

请添加图片描述

可以看到，我把一个元素在当前浏览器框内拖拽并且元素随着鼠标的拖拽而移动

二、看完效果后，来捋一下我们要执行效果都有哪些？

1. 要获取元素节点的信息

2. 需要对该元素进行鼠标按下事件

3. 还需要鼠标移入事件与在该元素的按下事件配合实现拖拽效果

4. 最后在鼠标在该元素内抬起的同时对鼠标移入事件进行解绑

三、根据目录二来编写代码过程

1. 获取元素节点的信息

<body>
	<div id="div1"></div>
	<script>
		//获取要对谁实现效果的元素节点
		var done=document.getElementById('div1');
	</script>
</body>

2. 对该元素进行鼠标按下事件绑定

done.onmousedown = function(e){
	//e 代表事件触发是鼠标与绑定元素之间的信息
	//获取鼠标按下时获取鼠标到绑定元素的X轴坐标和Y轴坐标
	//后续代码中如果对其进行拖拽则需要减去鼠标在该元素内的X和Y轴坐标
	//否则进行赋值时鼠标在该元素内的坐标就会为0
	var oleft = e.offsetX;
	var otop = e.offsetY;
}

3.配合鼠标移入事件实现拖拽效果


//需要将该事件放在上一个鼠标在该元素内按下的事件的里面
//鼠标需要通过按下和移入事件的配合来实现拖拽效果
document.onmousemove = function(e){
	//这个地方的 e 为鼠标移入事件触发时鼠标与整个浏览器页面之间的信息
	//还需要获取鼠标在浏览器页面移动是的X和Y的坐标
	//同时需要保留鼠标在该元素内的X和Y轴坐标
	//所以需要将鼠标在整个浏览器页面的X和Y轴的坐标减去鼠标在元素内的X和Y轴坐标
	var left = e.clientX-oleft  ;
	var top = e.clientY-otop ;
	
	//通过获取的坐标修改div的位置
	//然后将当前鼠标移动时的坐标赋值给当前done元素从而来实现效果
	//这里一定要对该元素的赋值拼接一个字符串'px'
	//因为获取的X和Y轴的坐标都是Number数据类型还没有px单位
	done.style.left = left + "px";
	done.style.top = top + "px";
}

当前已经写了的代码如下

done.onmousedown = function(e){
	var oleft = e.offsetX;
	var otop = e.offsetY;
	console.log(oleft)
	console.log(otop)
	
	//鼠标需要通过按下和移入事件的配合来实现拖拽效果
	document.onmousemove = function(e){
		//获取鼠标坐标
		//还需要获取鼠标在浏览器页面移动是的X和Y的坐标
		var left = e.clientX ;
		var top = e.clientY ;
		
		//通过获取的坐标修改div的位置
		//然后将当前鼠标移动时的坐标赋值给当前div1元素从而来实现效果
		done.style.left = left + "px";
		done.style.top = top + "px";
	}
}

其实这里已经有基本效果了

带大家看一下效果
请添加图片描述
但是在你鼠标抬起时不进行拖拽了这个元素还是会跟着鼠标移动

4. 所以我们要鼠标在该元素内抬起的同时对鼠标移入事件进行解绑

// 为元素绑定鼠标抬起事件
//最后在鼠标在该元素内抬起时进行鼠标在浏览器内移动事件进行解绑
done.onmouseup = function(){
//在鼠标在该元素内抬起的时候把鼠标在整个浏览器中进行移入的效果置空解绑
//停止操作
	document.onmousemove = null;
}