左右拖拽div

代码如下:

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<style>
    body,html{
		margin:0;
		padding:0;
		height:100%;
	}
	#box{
		width:600px;
		height:500px;
		overflow:hidden;
	}
	#left{
		width:calc(30% - 5px);
		height:100%;  
		background:skyblue;
		float:left;
	}

	#resize{
		width:5px;
		height:100%;
		cursor: w-resize;
		float:left;
	}

	#right{
		float:right;
		width:70%;
		height:100%;  
		background:tomato;
	}
    </style>
	

</head>
<body>



<div id="box">
  <div id="left"></div>
  <div id="resize"></div>
  <div id="right"></div>
</div>
</body>
<script>
	window.onload = function(){
	var resize = document.getElementById("resize");
	var left = document.getElementById("left");
	var right = document.getElementById("right");
	var box = document.getElementById("box");
	resize.onmousedown = function(e){
    var startX = e.clientX;
    resize.left = resize.offsetLeft;
    document.onmousemove = function(e){
      var endX = e.clientX;

      var moveLen = resize.left + (endX - startX);
      var maxT = box.clientWidth - resize.offsetWidth;
      if(moveLen<150) moveLen = 150; 
      if(moveLen>maxT-150) moveLen = maxT-150;

      resize.style.left = moveLen;
      left.style.width = moveLen + "px";
      right.style.width = (box.clientWidth - moveLen - 5) + "px";
    }
    document.onmouseup = function(evt){
      document.onmousemove = null;
      document.onmouseup = null; 
      resize.releaseCapture && resize.releaseCapture();
    }
    resize.setCapture && resize.setCapture();
    return false;
  }
}


</script>
</html>





相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页