用js面向对象写拖拽
function Drag(id){ var _this = this; //首先把this存起来,是为了下面的方法的面向对象会有this的指向问题. this.id = id; this.disX = 0;//用来存储鼠标按下时,鼠标和拖拽元素的左上角的水平距离 this.disY = 0;//用来存储鼠标按下时,鼠标和拖拽元素的左上角的垂直距离 this.oDiv = document.getElementById(this.id); this.oDiv.onmousedown = function(ev){ _this.fnDown(ev); } } Drag.prototype.fnDown = function(ev){ this.down(ev); }; Drag.prototype.down = function(ev){ var _this = this; var e = ev || event; if (this.oDiv.setCapture) { this.oDiv.setCapture(); } this.disX = e.clientX - this.oDiv.offsetLeft; this.disY = e.clientY - this.oDiv.offsetTop; document.onmousemove = function(ev){ _this.fnMove(ev); }; document.onmouseup = function(){ _this.fnUp(); }; return false; //阻止默认行为. } Drag.prototype.fnMove = function(ev){ var e = ev || event; this.SetCapture(); var l = e.clientX - this.disX; var t = e.clientY - this.disY; this.oDiv.style.left = l +"px"; this.oDiv.style.top = t + "px"; }; Drag.prototype.SetCapture = function(){ if (this.oDiv.setCapture) { this.oDiv.setCapture();//针对IE低版本拖拽的bug,事件捕获. } }; Drag.prototype.fnUp = function(ev){ document.onmousemove = null; document.onmouseup = null; // this.ReleaseCapture(); }; Drag.prototype.ReleaseCapture = function(){ if (this.oDiv.releaseCapture) { this.oDiv.releaseCapture();//鼠标抬起的时候,释放捕获. } }; 当然,记得把拖拽的元素设置为position:absolute;必须脱离文档流. 接下来,我们可以根据Drag这个为基类,扩展拖拽. //限制范围的拖拽 function LimitDrag(id,canleId){ this.drag = Drag;//对象冒充的方法实现继承 this.drag(id); //这里必须得调用一下,(当然也可以用其它的继承方式.) } for(var i in Drag.prototype){ LimitDrag.prototype[i] = Drag.prototype[i]; } LimitDrag.prototype.fnMove = function(e){ this.SetCapture(); this.fnLimit(e); } LimitDrag.prototype.fnLimit = function(e){ var e = e || window.event; var l = e.clientX - this.disX; var t = e.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.offsetHeight - this.oDiv.offsetHeight){ //拖拽的元素不能出屏幕的下侧 t = document.documentElement.offsetHeight - this.oDiv.offsetHeight; } this.oDiv.style.left = l +"px"; this.oDiv.style.top = t + "px"; } 当然还可以在这个限制范围的拖拽的基础上再扩展,比如,拖拽完后做一个回调.子元素的拖拽控制父元素的拖拽.