元素的拖动效果 #DOM #HTML5 2010-05-13 先看一下普通的拖动元素的代码 <!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> <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; 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> 非常简单。 考虑一下边境问题： <!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()） 可以拖动区域