元素的拖动效果作者：ONEBOYS 发表时间： 2010年05月13号，星期四 阅读：1,684 次 先看一下普通的拖动元素的代码 <!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){ /* 横向超出 */ if(oX < 0){ o.style.left = 0 + "px"; }else{ o.style.left = largeL + "px"; } }else{ o.style.left = oX + "px"; } if(oY > largeT || oY < 0){ /* 纵向超出 */ if(oY < 0){ o.style.top = 0 + "px"; }else{ o.style.top = largeT + "px"; } }else{ o.style.top = oY + "px"; } })(); // 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需要注意浏览器中在拖动图片时候会有默认动作的，拖动带链接的内容也是。所以拖动这些内容时应阻止其事件。（下面拖动代码略有差别） <!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('tips1');"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> 拖动图片 </div> <div class="tips" id="tips2" onmouseover="dragF.drag('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){ $id(obj).onmousedown=function(e){ var e = e ? e : window.event; if(!window.event) {e.preventDefault();} /* 阻止标注浏览器下拖动a,img的默认事件 */ dragF.locked=true; $id(obj).style.position="absolute"; $id(obj).style.zIndex="100"; if (dragF.lastObj&&dragF.lastObj!=$id(obj)) { /* 多元素拖动时候需要恢复上一次元素的状态 */ dragF.lastObj.style.zIndex = "1"; } dragF.lastObj=$id(obj); var tempX=$id(obj).offsetLeft; var tempY=$id(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; $id(obj).style.left=tempX+(e.clientX-dragF.x)+"px"; $id(obj).style.top=tempY+(e.clientY-dragF.y)+"px"; if(window.event) {e.returnValue=false;} /* 阻止ie下a,img的默认事件 */ } document.onmouseup=function(){ dragF.locked=false; } } } } </script> </html> 标签： drag&drop, 拖动层, 拖拽, 阻止冒泡, 默认事件 这篇文章发布于 2010年05月13号，星期四，13:55，归类于 Javascript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
回复