面向对象拖拽

最新推荐文章于 2021-03-17 20:53:47 发布

转载最新推荐文章于 2021-03-17 20:53:47 发布 · 70 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/xiaocuncheng/p/8487966.html

收录于

当前文章被以下社区和专栏收录：

本文介绍了一个简单的拖拽功能实现方式，通过JavaScript操作DOM元素完成拖拽效果。具体实现了鼠标按下时记录位置，鼠标移动时更新元素位置，并在鼠标释放时解除事件监听。

function Drag(){

this.logo=document.getElementsByClassName("f-logo")[0];

this.enter=document.getElementsByName("enter")[0];

this.logo.onmousedown = function(e){
　　_this.down(e);
　　}

}

Drag.prototype.down = function(e){
　　var _this = this;
　　var e = e||event;
　　this.divX = e.offsetX;
　　this.divY = e.offsetY;
　　document.onmousemove = function(e){
　　　　_this.mov(e)
　　}
　　document.onmouseup = function(){
　　　　_this.up()
　　}
}
Drag.prototype.mov = function(e){
　　var e = e||event;
　　this.enter.style.left = e.clientX- this.divX +'px';
　　this.enter.style.top = e.clientY-this.divY+'px';
}
Drag.prototype.up = function(){
　　document.onmousemove = null;
　　document.onmouseup = null;
}