<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>面向对象的拖拽</title>
<style>#div1{width:100px;height:100px;background:red;position:absolute;}</style>
<script type="text/javascript">/*
//先用普通方式写个拖拽
window.onload = function(){
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(){
var ev = ev || window.event;
disX = ev.clientX - oDiv.offsetLeft;
disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
};
}
*/
/*
// 再变型
var oDiv = null;
var disX = 0;
var disY = 0;
window.onload = function(){
//3、提取全局变量
oDiv = document.getElementById('div1');
//4、将onload中非赋值语句放到初始化函数当中,并在此调用
init();
}
function init(){
//1、取消函数嵌套函数,将此处的函数拿出去
oDiv.onmousedown = fnDown;
}
function fnDown(){
var ev = ev || window.event;
disX = ev.clientX - oDiv.offsetLeft;
disY = ev.clientY - oDiv.offsetTop;
//2、取消函数嵌套函数,将此处的函数拿出去,在此处调用
document.onmousemove = fnMove;
document.onmouseup = fnUp;
return false;
}
function fnMove(ev){
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
}
function fnUp(){
document.onmousemove = null;
document.onmouseup = null;
}
*/
//再写成面向对象的方式
window.onload = function(){
var d1 = new Drag('div1');
d1.init();
};
function Drag(id){
this.oDiv = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
Drag.prototype.init = function(){
var This = this;
this.oDiv.onmousedown = function(ev){
var ev = ev || window.event;
This.fnDown(ev);
return false;
};
};
Drag.prototype.fnDown = function(ev){
var This = this;
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = function(ev){
var ev = ev || event;
This.fnMove(ev);
};
document.onmouseup = this.fnUp;
};
Drag.prototype.fnMove = function(ev){
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function(){
document.onmousemove = null;
document.onmouseup = null;
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
