js,拖拽本文实例讲述了js实现的简练高效拖拽功能。分享给大家供大家参考，具体如下： 运行效果图如下： 
具体代码如下： <!DOCTYPE HTML><html><head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title></head><body><p>aaaaaaaaaaa</p><div id="one" style="height:100px;width:100px;background:red;position:absolute;"></div><script>var odiv=document.getElementById("one");dra(odiv);function dra(obj){ obj.onmousedown=function(e){ var oe=e||window.event; var $this=this; var l=oe.clientX-$this.offsetLeft; var t=oe.clientY-$this.offsetTop; document.onmousemove=function(e){ var oe=e||window.event; var ol=oe.clientX-l; var ot=oe.clientY-t; if(ol<0) ol=0; if(ot<0) ot=0; if(ot>document.documentElement.clientHeight-$this.offsetHeight) ot=document.documentElement.clientHeight-$this.offsetHeight; if(ol>document.documentElement.clientWidth-$this.offsetWidth) ol=document.documentElement.clientWidth-$this.offsetWidth; $this.style.left=ol+"px"; $this.style.top=ot+"px"; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; if($this.releaseCapture) $this.releaseCapture(); } if($this.setCapture){ $this.setCapture(); } if(oe.preventDefault) oe.preventDefault(); else oe.returnValue=false; return false; }}</script></body></html>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》 希望本文所述对大家JavaScript程序设计有所帮助。
js,拖拽
|
