两端拖拽并且交叉

最新推荐文章于 2023-11-13 17:22:29 发布

不爱当码农的瘦子

最新推荐文章于 2023-11-13 17:22:29 发布

阅读量161

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43139889/article/details/83415678

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>推拽条</title>
	<style>
		.box{
			width:400px;
			height: 20px;
			margin:50px auto;
			position: relative;
			background:#ccc;
			border-radius: 10px;
		}
		.bigBox{
			width:400px;
			height: 20px;
			position: absolute;
			background:blue;
			border-radius: 10px;
			position: absolute;
			top:0;
			left:0;
		}
		.smallBox1{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background:red;
			position:absolute;
			top:0;
			left:0;
		}
		.smallBox2{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background:yellow;
			position:absolute;
			top:0;
			left:380px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="bigBox"></div>
		<div class="smallBox1"></div>
		<div class="smallBox2"></div>
	</div>
	<script type="text/javascript">
		var oBox=document.querySelector('.box'),
			bBox=document.querySelector('.bigBox'),
			sBox1=document.querySelector('.smallBox1'),
			sBox2=document.querySelector('.smallBox2');
		var boxW=bBox.offsetWidth;

		//首先实现两个smallBox的拖拽
		sBox1.onmousedown=function(e){
			var ev=e||window.event;
			//鼠标在box1的哪个位置
			var offset_x=ev.offsetX;
			document.onmousemove=function(e){
				var ev=e||window.event;
				var x=ev.clientX-oBox.offsetLeft-offset_x;
				x>=oBox.offsetWidth-sBox1.offsetWidth?x=oBox.offsetWidth-sBox1.offsetWidth:x;
				x<=0?x=0:x;
				sBox1.style.left=x+'px';
				//同时可以设置bigBox的宽度随着小球移动而变化
				bBox.style.width=Math.abs(sBox2.offsetLeft-sBox1.offsetLeft)+sBox1.offsetWidth+'px';

				//实现sBox交叉效果
				if(sBox2.offsetLeft-sBox1.offsetLeft<0){
					bBox.style.left=sBox2.offsetLeft+'px';
				}else{
					bBox.style.left=x+'px';
				}

			}
			document.onmouseup=function(){
				document.onmousemove=null;
			}

		}

		sBox2.onmousedown=function(e){
			var ev=e||window.event;
			var offset_x=ev.offsetX;
			document.onmousemove=function(e){
				var ev=e||window.event;
				var x=ev.clientX-oBox.offsetLeft-offset_x;
				x>=oBox.offsetWidth-sBox2.offsetWidth?x=oBox.offsetWidth-sBox2.offsetWidth:x;
				x<=0?x=0:x;
				sBox2.style.left=x+'px';
				//同时可以设置bigBox的宽度随着小球移动而变化，此时要考虑另一端的滑块已经滑动了一些距离
				bBox.style.width=Math.abs(sBox2.offsetLeft-sBox1.offsetLeft)+sBox2.offsetWidth+'px';//由于之前移动了box1，所以bigbox的width以及left不再是初始值bigW那样了，可以在down的时候获得一下bigbox的宽度，但是注意不能在move的时候获得bigbox的width

				//实现sBox交叉效果
				if(sBox2.offsetLeft-sBox1.offsetLeft<0){
					bBox.style.left=x+'px';
				}else{
					bBox.style.left=sBox1.offsetLeft+'px';
				}

			}
			document.onmouseup=function(){
				document.onmousemove=null;
			}
		}
	</script>
</body>
</html>

onmousedown里面加入onmousemove可以实现拖拽。

主要的难点在于要实现两端拖拽，就要时刻更改滑条的宽度以及left值，特别是在交叉之后，它的left的值是由另外一端的滑块的left值决定的

不爱当码农的瘦子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两端拖拽并且交叉

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;推拽条&lt;/title&gt; &lt;style&gt; .box{ width:400px; height: 20px;
复制链接

扫一扫