拖拽总结

最新推荐文章于 2023-09-16 23:50:14 发布

LW0512

最新推荐文章于 2023-09-16 23:50:14 发布

阅读量200

点赞数

分类专栏：拖拽文章标签：前端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108911722

版权

拖拽专栏收录该内容

1 篇文章

订阅专栏

1：鼠标在元素上的坐标位置
          offsetX
          offsetY
2:鼠标在浏览器（可视窗口）上的坐标位置
          clientX
          clientY
3：事件

onmousedown		鼠标按下
onmousemove		鼠标移动
onmouseup		鼠标弹起

4:可视窗口的宽度和高度

document.documentElement.clientWidth
document.documentElement.clientHeight

5:获取元素的宽高

offsetWidth
offsetHeight

6:获取元素到浏览器窗口的距离

offsetLeft
offsetTop

简单拖拽效果图
在这里插入图片描述
具体代码入下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 100px;
				background: pink;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		//拖拽思路
		//	1：光标移到拖拽元素上，按住鼠标不松手
		//	2：开始在可视区域移动光标。被拖拽的元素跟随
		//	3：松开鼠标，被拖拽的元素停止移动
		var obox=document.getElementById('box');
		obox.onmousedown=function(e){
			var e=e||window.event;
			x=e.offsetX;//获取光标在div元素的坐标位置
			y=e.offsetY;
			document.onmousemove=function(e){
				var e=e||window.event;
				obox.style.left=e.clientX-x+'px';
				obox.style.top=e.clientY-y+'px';
				console.log(e.clientX+',,,'+x)//251,,,98
			}
//			e.clientX是光标在可视区域的坐标位置
//			e.offsetX;//获取光标在div元素的坐标位置
//			光标在可视区域的值-获取光标在div元素的值  为什么两个值要减一下？
//			两个值相减的目的，就是可以让光标在div上任意位置就行拖拽
		}
		obox.onmouseup=function(){
			document.onmousemove=0;
//			document.οnmοusemοve=后面可以赋值  null 0 false ' '
		}
	</script>
</html>

拖拽碰撞效果图
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background: yellow;
				position: fixed;
				top:300px;
				left:300px;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
	<script type="text/javascript">
		//碰撞思路
		//1：拖拽div1元素
		//2：当div1的底边碰到div2的上边，div2变色
		//	当div1的上边碰到div2的底边，div2变色
		//	当div1的左边碰到div2的右边，div2变色
		//	当div1的右边碰到div2的左边，div2变色
//		3：如何做到当div1的底边碰到div2的上边，div2就变色呢？
//			先得到div1元素底边到顶部距离？odiv1.offsetTop+odiv1.offseHeight
//			再得到div2元素上边到顶部距离？odiv2.offsetTop
//			如果判断div1底边到顶部的距离>div2元素上边到顶部距离,那么就让div2变色

		var ored=document.getElementById('box1');
		var oyellow=document.getElementById('box2');
		ored.onmousedown=function(e){
			var e=e||window.event;
			var x=e.offsetX;
			var y=e.offsetY;
			document.onmousemove=function(e){
				var e=e||window.event;
				ored.style.left=e.clientX-x+'px';
				ored.style.top=e.clientY-y+'px';
				//求红色底边到顶部的距离
				var ored_b=ored.offsetHeight+ored.offsetTop;
				//求红色上边到顶部的距离
				var ored_t=ored.offsetTop;
				//求红色左边到浏览器左边的距离
				var ored_l=ored.offsetLeft;
				//求红色右边到浏览器左边的距离
				var ored_r=ored.offsetWidth+ored.offsetLeft;
				//求黄色上边到顶部的距离
				var oyellow_t=oyellow.offsetTop;
				//求黄色底边到顶部的距离
				var oyellow_b=oyellow.offsetHeight+oyellow.offsetTop;
				//求红色左边到浏览器左边的距离
				var oyellow_l=oyellow.offsetLeft;
				//求红色右边到浏览器左边的距离
				var oyellow_r=oyellow.offsetWidth+oyellow.offsetLeft;
				//我们现在已经求出了 两个元素四个边的值！
				//红色底边到顶部的距离>黄色上边到顶部的距离 黄色变蓝
				//红色上边到顶部的距离<黄色底边到顶部的距离 黄色变蓝
				//红色左边到左部的距离<黄色右边到左部的距离 黄色变蓝
				//红色右边到左部的距离>黄色左边到左部的距离 黄色变蓝
				if(ored_b<oyellow_t||ored_t>oyellow_b||ored_l>oyellow_r||ored_r<oyellow_l){
					oyellow.style.background='yellow';
				}else{
					oyellow.style.background='blue';
				}
			}
			
		}
		ored.onmouseup=function(){
			document.onmousemove=null;
		}
		
		
		
		
		
	</script>
</html>