HTML DIV 层拖动简单实现
来源：互联网 发布：淘宝卖家提前收款 编辑：程序博客网 时间：2024/05/22 10:59
<HTML> <HEAD> <title>WebForm8</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <script language=javascript> var iNodeX; var iNodeY; var oNode; var isDown = false; var iBodyWidth = 0; var iBodyHeight = 0; var iMaxTop = 0; var iMaxLeft = 0; var iMinTop = 0; var iMinLeft = 0; window.onload = function() { iBodyWidth = document.body.clientWidth; iBodyHeight = document.body.clientHeight; iMaxLeft = iBodyWidth-100; iMaxTop = iBodyHeight-100; } //开始拖动 //1:在截取层上按下鼠标后设置拖动开始时初始值 function InitDrag() { oNode=document.getElementById("div"); oNode.setCapture(); //获取当前对象的鼠标捕捉 iNodeZ=oNode.style.zIndex; oNode.style.zIndex=100; //确保当前层显示在最前面 iNodeX=parseInt(event.offsetX); iNodeY=parseInt(event.offsetY); isDown=true; } //拖动 //1:限制拖动必须在底图范围内 function OnDrag() { if(isDown) { ChangePosition(); LimitOnTarget(); } } //结束拖动 //释放当前对象的鼠标捕捉 function StopDrag() { isDown=false //鼠标松开 oNode.style.zIndex=iNodeZ //还原对象的Z轴坐标值 oNode.releaseCapture() //释放当前对象的鼠标捕捉 } //改变截取区域的位置 function ChangePosition() { with(oNode.style) { posLeft=document.body.scrollLeft+event.x-iNodeX; //设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标 posTop=document.body.scrollTop+event.y-iNodeY; //设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标 } } //限制在目标对象内拖动 //如果超出了边缘将目标对象的最大/最小值赋给截取层 function LimitOnTarget() { var iX = parseInt(oNode.style.left); //对象x坐标 var iY = parseInt(oNode.style.top); //对象y坐标 var iWidth = parseInt(oNode.style.width); //对象宽度 var iHeight = parseInt(oNode.style.height); //对象长度 var iTagX = 0 //目标对象x坐标 var iTagY = 0 //目标对象y坐标 var iTagWidth = iBodyWidth; //目标对象宽度 var iTagHeight = iBodyHeight; //目标对象长度 if(iX<iTagX) { oNode.style.left = iTagX; } if(iY<iTagY) { oNode.style.top = iTagY; } if(iX+iWidth>iTagX+iTagWidth) { oNode.style.left = iMaxLeft; } if(iY+iHeight>iTagY+iTagHeight) { oNode.style.top = iMaxTop; } } </script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <div id="div" onmousedown='InitDrag()' onmousemove='OnDrag();' onmouseup='StopDrag()' style="position: absolute;border-top:1px solid BLUE;border-bottom:1px solid BLUE;border-right:1px solid BLUE;border-left:1px solid BLUE; background-color:red; filter: Alpha(opacity=30);width:100;height:100"></div> </form> </body></HTML>
