div拖拽效果

来源：互联网发布：lua java 编辑：程序博客网时间：2024/05/21 23:01
一个很老的项目,用的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.onmousemove=function(e){var e=e||window.event;mouse_x=e.pageX;mouse_y=e.pageY;};item.onmousedown=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.onmouseup=function(){clearInterval(timer);timer=0;}}window.onload=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