js原生面向对象拖拽
css代码:
#box2{
width:300px;
height:300px;
line-height:300px;
text-align: center;
background-color:#62B6F4;
clear:both;
float: left;
}
js代码:
function test(){
var drag = new Drag('box2');
drag.init();
}
function Drag(id){
this.obj = document.getElementById(id);
this.disx;
this.disy;
};
Drag.prototype.init = function(){
var me = this;
this.obj.onmousedown = function(e){
var e = e || event;
me.mouseDown(e);
return false;
};
}
Drag.prototype.mouseDown = function(e){
var me =this;
this.disx = e.clientX - this.obj.offsetLeft;
this.disy = e.clientY - this.obj.offsetTop;
document.onmousemove = function(e){
var e = e || event;
me.mouseMove(e);
};
document.onmouseup = function(e){
var e =e || event;
me.mouseup(e);
}
};
Drag.prototype.mouseMove = function(e){
this.obj.style.marginLeft = (e.clientX - this.disx) + 'px';
this.obj.style.marginTop = (e.clientY - this.disy) + 'px';
};
Drag.prototype.mouseup =function(e){
document.onmousedown = null;
document.onmousemove =null;
document.onmouseup = null;
return false;
}
test();
html代码:
<div id="box2">这是拖拽对象2</div>






浙公网安备 33010602011771号