javaScript采用面向对象的方式实现实现拖拽

来源：互联网发布：淘宝代充平台编辑：程序博客网时间：2024/06/01 07:46

本人闲来无事又重温了一下原生js 发现之前的很多知识都记得很不牢固，之所以这样还是练习不够，所以找了一些视频又进行了一些学习。（基础才是王道）

实现拖拽的布局

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:200px; height:200px; background:yellow; position:absolute;}#div2 {width:200px; height:200px; background:green; position:absolute;}</style><script src="demo.js"></script><script src="LimitDrag.js"></script><script>window.onload=function (){new Drag('div1');new LimitDrag('div2');};</script></head><body><div id="div1">普通拖拽</div><div id="div2">限制范围</div></body></html>

实现拖拽的方法：

function Drag(id){var _this=this;this.disX=0;this.disY=0;this.oDiv=document.getElementById(id);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;this.oDiv.style.left=oEvent.clientX-this.disX+'px';this.oDiv.style.top=oEvent.clientY-this.disY+'px';};Drag.prototype.fnUp=function (){document.onmousemove=null;document.onmouseup=null;};

0 0