JS基于面向对象实现的拖拽功能示例
2016-12-20 00:00
916 查看
本文实例讲述了JS基于面向对象实现的拖拽功能。分享给大家供大家参考,具体如下:
继承
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
利用JavaScript实现拖拽改变元素大小
浅析JavaScript动画模拟拖拽原理
原生js实现弹出层登录拖拽功能
js实现小窗口拖拽效果
js拖拽功能实现代码解析
基于JavaScript实现右键菜单和拖拽功能
Sortable.js拖拽排序使用方法解析
js实现拖拽效果
js完美的div拖拽实例代码
js 表格排序(编辑+拖拽+缩放)
鼠标拖拽移动子窗体的JS实现
js实现的简练高效拖拽功能示例
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function(){ new Drag("div1"); new Drag("div2"); } function Drag(id) { var _this=this; this.oDiv=document.getElementById(id); this.disX=0; this.disY=0; this.oDiv.onmousedown=function(ev){ _this.fnDown(ev); return false; }; } Drag.prototype.fnDown=function(ev) { var _this=this; var oEvent=ev||event; this.disX=oEvent.clientX-this.oDiv.offsetLeft; this.disY=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function(ev){ _this.fnMove(ev); }; document.onmouseup=function(){ _this.fnUp(); }; }; Drag.prototype.fnMove=function(ev) { var oEvent=ev||event; var l=oEvent.clientX-this.disX; var t=oEvent.clientY-this.disY; if(l<0) { l=0; } else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) { l=document.documentElement.clientWidth-this.oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight) { t=document.documentElement.clientHeight-this.oDiv.offsetHeight; } this.oDiv.style.left=l+'px'; this.oDiv.style.top=t+'px'; }; Drag.prototype.fnUp=function() { document.onmousemove=null; document.onmouseup=null; }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
继承
function LimitDrag(id){ Drag.call(this,id); //继承属性 } for(var i in Drag.prototype){ LimitDrag.prototype[i]=Drag.prototype[i]; }
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
JS实现拖拽的方法分析利用JavaScript实现拖拽改变元素大小
浅析JavaScript动画模拟拖拽原理
原生js实现弹出层登录拖拽功能
js实现小窗口拖拽效果
js拖拽功能实现代码解析
基于JavaScript实现右键菜单和拖拽功能
Sortable.js拖拽排序使用方法解析
js实现拖拽效果
js完美的div拖拽实例代码
js 表格排序(编辑+拖拽+缩放)
鼠标拖拽移动子窗体的JS实现
js实现的简练高效拖拽功能示例
相关文章推荐
- JS基于面向对象实现的拖拽功能示例
- JS基于面向对象实现的多个倒计时器功能示例
- JS实现的简单拖拽功能示例
- 基于pako.js实现gzip的压缩和解压功能示例
- JS实现的文件拖拽上传功能示例
- JS实现为动态添加的元素增加事件功能示例【基于事件委托】
- vue2.0使用Sortable.js实现的拖拽功能示例
- JS基于面向对象实现的拖拽库实例
- JS基于FileSaver.js插件实现文件保存功能示例[原创]_javascript技巧_脚本之家
- vuejs2.0运用原生js实现简单的拖拽元素功能示例
- JS基于面向对象实现的选项卡效果示例
- JS基于正则表达式实现的密码强度验证功能示例
- JS实现的简单拖拽购物车功能示例【附源码下载】
- JS基于面向对象实现的选项卡效果示例
- JS基于面向对象实现的拖拽库实例
- JS基于onclick事件实现单个按钮的编辑与保存功能示例
- js实现鼠标拖拽多选功能示例
- js实现的简练高效拖拽功能示例
- 【JS】原生js实现拖拽功能基本思路
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)