用JS代码来操作元素拖拽移动的效果

苏百玖

2024-02-12 帮助5人

一、先看要执行后的效果

学新通

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

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

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;
}

最后效果就成了
学新通

拜拜各位，下次再见

这篇好文章是转载于：学新通技术网

用JS代码来操作元素拖拽移动的效果

一、先看要执行后的效果

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

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

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

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

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

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

1. 获取元素节点的信息

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

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

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

photoshop蒙版画笔没反应怎么办

微信小程序没声音怎么办

微信提示登录环境异常是什么意思原因

excel图片置于文字下方的方法

微信运动停用后别人还能看到步数吗

使用云服务器搭建个人游戏加速器教程

微信人名旁边有个图标有什么用

Excel筛选和排序是灰色的怎么办

抖音国际版要用什么加速器能流畅刷Tiktok的加速器

键盘上的负数是哪个键