div拖拽效果

最新推荐文章于 2023-06-21 14:42:59 发布

我有一头小毛驴我从来都不骑

最新推荐文章于 2023-06-21 14:42:59 发布

阅读量479

点赞数

分类专栏：前端文章标签： div

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个很老的项目,用的jsp开发,有个div可以拖拽的效果,百度了一下,于此转载,留作参考笔记.(最简洁的JS代码，拖拽改变DIV大小)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
/*  
实现需求:对一个div框实现,通过鼠标拖拉边或对角达到div框大写也随之改变
以下实现对右框,下框,对角框的拖拉效果
大体的布局思路:
要实现此需求关键是要确定对角的坐标位置.
1.定义一整体#div_wrapper,定位绝对
2.定义三个div分别代表右框#div_01--确定x轴,下框#div_02--确定y轴,对角框的左右区域#div_03,定位绝对,位置鼠标悬浮作用区域呈现相应的指示图标
3.通过鼠标移动div,记录x,y值,从而确定对角坐标

*/
	
	
#div_wrapper{
width: 500px;
height:500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -250px;
border: 1px solid silver;

}
#div_01{
	position: absolute;
	width: 10px;
	height: 100%;
	/*background-color: red;*/
	top:0px;
	right: 0px;	
}
#div_01:hover{
	cursor: e-resize;
}

#div_02{
	position: absolute;
	width: 100%;
	height: 10px;
	/*background-color: red;*/
	bottom: 0px;
	left: 0px;	
}

#div_02:hover{
	cursor: n-resize;
}

#div_03{
	position: absolute;
	width: 10px;
	height: 10px;
	/*background-color:black;*/
	right: 0px;
	bottom: 0px;	
}

#div_03:hover{
	cursor: nw-resize;
}

#div_0 {
	text-align: center; 
	height: 30px;
	width: 100%;
	background-color: silver;
	margin: 0px;
}

#div_0 p{
	margin: 0px;
	line-height: 30px;
	font: bold 17px 微软雅黑,arial;
}
	</style>
<script type="text/javascript" >
var offsetLeft,offsetTop,timer,mouse_x,mouse_y,margin_left,margin_top;
/* 仅以x轴为例 
  offsetLeft:右边框距左边框的初始距离
  to_x:右边框距离左边框的终始距离
  mousex_x:鼠标距离左端页面距离
  margin_left:左边框距离左端页面的距离--此例中因为左边框没动,此值为定值
      于此吐槽下:其实这个offsetLeft于此没啥用
       这个方法的基本意思就是:
  1.初始化预埋drag事件
  2.onmousemove事件随时监听鼠标位置
  3.onmousedown监听鼠标按下操作,onmouseup监听鼠标松开操作
  4.onmousedown--onmouseup之间定义为拖拽行为,在此期间定一个循环事件每隔一段时间(一定要小于拖拽的停顿间隔时间),通过鼠标的位置计算x,y轴的距离
  
  本例实现中使用onmousemove与setInterval几乎死循环式的方法,平常还是慎用的较好
 */
var to_x,to_y;

function drag(id,type){
	var item=document.getElementById(id);
	document.οnmοusemοve=function(e){
		var e=e||window.event;
		mouse_x=e.pageX;
		mouse_y=e.pageY;
	};
	item.οnmοusedοwn=function(){
		// offsetTop以及offsetTop必须要放在mousedown里面，每次都要计算
		offsetLeft=item.offsetLeft;
		offsetTop=item.offsetTop;
		margin_top=mouse_y-offsetTop;
		margin_left=mouse_x-offsetLeft;
		timer=setInterval(function(){
			if(timer){
				var max_with=800,max_height=600;
				 to_x=mouse_x-margin_left;
				 to_y=mouse_y-margin_top;
				 to_x=Math.min(to_x,max_with);
				 to_y=Math.min(to_y,max_height);
				 // 一定要记得加“px"
				 if(type=="x"){
				 	item.style.left=to_x+"px";
				 	document.getElementById("div_wrapper").style.width=to_x+10+"px";
				 	document.getElementById("div_03").style.left=to_x+"px";			 
				 }
				 else if(type=="y"){
				 	item.style.top=to_y+"px";
				 	document.getElementById("div_03").style.top=to_y+"px";
				 	document.getElementById("div_wrapper").style.height=to_y+10+"px";				
				 }
				 //默认为上下左右移动
				 else {
				 	item.style.left=to_x+"px";
				 	item.style.top=to_y+"px";
				 	// Style刷新
			 		document.getElementById("div_01").style.left=to_x+"px";
			 		document.getElementById("div_02").style.top=to_y+"px";
			 		document.getElementById("div_wrapper").style.width=to_x+10+"px";
			 		document.getElementById("div_wrapper").style.height=to_y+10+"px";
				 }	 
			}
		},5);
	};
	document.οnmοuseup=function(){
		clearInterval(timer);
		timer=0;
	}
}

window.οnlοad=function(){
	drag("div_01","x");
	drag("div_02","y");
	drag("div_03");
	// drag("div_wrapper");
}
</script>
</head>
<body>
	<div id="div_wrapper">
		<div id="div_0">
			<!-- <p>拖拽可更改DIV大小</p> -->
		</div>
		<div id="div_01"></div>
		<div id="div_02"></div>
		<div id="div_03"></div>
	</div>
</body>
</html>

我有一头小毛驴我从来都不骑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div拖拽效果

一个很老的项目,用的jsp开发,有个div可以拖拽的效果,百度了一下,于此转载,留作参考笔记.(最简洁的JS代码，拖拽改变DIV大小) Document /* 实现需求:对一个div框实现,通过鼠标拖拉边或对角达到div框大写也随之改变以下实现对右框,下框,对角框的拖拉效果大体的布局思路:要实现此需求关键是要确定对角的坐标位置.1.定义一整体#div_wrapper,
复制链接

扫一扫

专栏目录