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程序设计有所帮助。