js实现的简练高效拖拽功能示例
2016-12-21 10:35
766 查看
运行效果图如下:
具体代码如下:
<!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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- vue2.0使用Sortable.js实现的拖拽功能示例
- js实现鼠标拖拽多选功能示例
- JS实现的简单拖拽功能示例
- JS基于面向对象实现的拖拽功能示例
- vuejs2.0运用原生js实现简单的拖拽元素功能示例
- JS实现的简单拖拽购物车功能示例【附源码下载】
- JS实现的文件拖拽上传功能示例
- JS基于面向对象实现的拖拽功能示例
- JS实现一键回顶功能示例代码
- js实现页面转发功能示例代码
- 帮助你实现移动设备上的拖拽刷新功能的javascript类库 - hook.js
- 原生js实现弹出层登录拖拽功能
- 【JS】原生js实现拖拽功能基本思路
- js实现模态窗口的拖拽功能
- Node.js实现的简易网页抓取功能示例
- 原生js实现拖拽功能基本思路
- JS基于FileSaver.js插件实现文件保存功能示例[原创]_javascript技巧_脚本之家
- js实现简单div拖拽功能实例
- JS实现仿百度输入框自动匹配功能的示例代码
- JS使用正则表达式实现关键字替换加粗功能示例