元素的拖动效果 - Mr.Drive2Far

先看一下普通的拖动元素的代码

非常简单。

考虑一下边境问题：

<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>简单拖曳</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} .tips{position:absolute;background:#eee;width:100px;height:100px;} </style> </head> <body style=""> <div class="tips" onmousedown="drag(this,event);"> 拖动框 </div> </body> <script type="text/javascript"> var drag=function(o,e){ var e = e ? e : window.event; var tX=o.offsetLeft, tY=o.offsetTop, dx=e.clientX, dy=e.clientY; var largeL = document.documentElement.offsetWidth - o.offsetWidth, largeT = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) - o.offsetHeight; document.onmousemove=function(e){ var e = e ? e : window.event; var oX = tX + (e.clientX - dx), oY = tY + (e.clientY - dy); (function(){ /* 考虑边境 */ if(oX > largeL || oX < 0){ oX = (oX < 0) ? 0 : largeL } if(oY > largeT || oY < 0){ oY = (oY < 0) ? 0 : largeT } })(); o.style.left = oX + "px"; o.style.top = oY + "px"; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } </script> </html>

如果拖动层内有元素不允许拖动。可以绑定一个事件，阻止拖动处理函数的执行。

<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>简单拖曳</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} .tips{position:absolute;background:#eee;width:180px;height:200px;} textarea{font-size:12px;} </style> </head> <body> <div class="tips" onmousedown="drag(this,event);"> <textarea cols='25' rows='5' onmousedown="(document.all)?(event.cancelBubble = true) : (event.stopPropagation())">阻止拖动区域（ie,ff支持cancelBubble; ie除外，都支持标准stopPropagation()）</textarea> 可以拖动区域 </div> </body> <script type="text/javascript"> var drag=function(o,e){ var e = e ? e : window.event; var tX=o.offsetLeft, tY=o.offsetTop, dx=e.clientX, dy=e.clientY; document.onmousemove=function(e){ var e = e ? e : window.event; o.style.left=tX+(e.clientX-dx)+"px"; o.style.top=tY+(e.clientY-dy)+"px"; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } </script> </html>

图片的drag&drop需要注意浏览器中在拖动图片时候会有默认动作的，拖动带链接的内容也是。所以拖动这些内容时应阻止其事件，另外加入setCapture。（下面拖动代码略有差别）

<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>拖曳</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style> </head> <body> <div class="tips" id="tips1" onmouseover="dragF.drag($id('tips1'));"> <img src="http://www.baidu.com/img/bd_logo1.png"> </div> <div class="tips" id="tips2" onmouseover="dragF.drag($id('tips2'));"> <a href="http://www.cssass.com" target="_blank">链接</a><br /> </div> </body> <script type="text/javascript"> var $id=function(id){return document.getElementById(id);} var dragF={ locked:false, lastObj:undefined, drag:function(obj){ obj.onmousedown=function(e){ var e = e ? e : window.event; if(!window.event) {e.preventDefault();} /* 阻止标注浏览器下拖动a,img的默认事件 */ if(obj.setCapture){ obj.setCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } dragF.locked=true; obj.style.position="absolute"; obj.style.zIndex="100"; if (dragF.lastObj&&dragF.lastObj!=obj) { /* 多元素拖动时候需要恢复上一次元素的状态 */ dragF.lastObj.style.zIndex = "1"; } dragF.lastObj=obj; var tempX=obj.offsetLeft; var tempY=obj.offsetTop; dragF.x=e.clientX; dragF.y=e.clientY; document.onmousemove=function(e){ var e = e ? e : window.event; if(dragF.locked==false) return false; obj.style.left=tempX+(e.clientX-dragF.x)+"px"; obj.style.top=tempY+(e.clientY-dragF.y)+"px"; if(window.event) {e.returnValue=false;} /* 阻止ie下a,img的默认事件 */ } document.onmouseup=function(){ dragF.locked=false; document.onmousemove=null; document.onmouseup=null; if(obj.releaseCapture){ obj.releaseCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } } } } } </script> </html>