一个JS面向对象方面的问题

下面这段代码是根据后面那段被注释了的代码改过来的，后来那段被注释的代码是可以运行的，但是我改成面向对象的方式后就出错了，请各位大哥哥姐姐们帮帮忙。小弟刚接触JS面向对象，请各位多多指教。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script  type="text/javascript">


var MyDrag = function (){};
MyDrag.prototype.diffX = 0;
MyDrag.prototype.diffY = 0;
MyDrag.prototype.handMouseDown = function(e)
{
 e = e || event;
var v_div = document.getElementById("divl");
this.diffX = e.clientX - v_div.offsetLeft;
this.diffY = e.clientY - v_div.offsetTop;
if(document.addEventListener)
{
window.document.addEventListener("mousemove",this.handMouseMove,false);
    window.document.addEventListener("mouseup",this.handMouseUp,false);

}else
{

window.document.attachEvent("onmousemove",this.handMouseMove);
window.document.attachEvent("onmouseup",this.handMouseUp);
}
}
MyDrag.prototype.handMouseMove = function(e)
{
e = e|| event;
var v_div = document.getElementById("divl");

v_div.style.top = (e.clientY - this.diffY)+"px";
v_div.style.left = (e.clientX - this.diffX)+"px";
}
MyDrag.prototype.handMouseUp =function()
{
if(window.document.removeEventListener)
{

window.document.removeEventListener("mousemove",this.handMouseMove,false);
window.document.removeEventListener("mouseup",this.handMouseUp,false);
}else
{

window.document.detachEvent("onmousemove",this.handMouseMove);
window.document.detachEvent("onmouseup",this.handMouseUp);
}
}
function myHand(e)
{
if (event)
{
e = event;
}
var drag = new MyDrag();
drag.handMouseDown(e);
}
/*
function handMouseDown(e)
{
//window.document.onclick = clickMe;
 e = e || event;
var v_div = document.getElementById("divl");
diffX = e.clientX - v_div.offsetLeft;
diffY = e.clientY - v_div.offsetTop;
if(document.addEventListener)
{
window.document.addEventListener("mousemove",handMouseMove,false);
    window.document.addEventListener("mouseup",handMouseUp,false);

}else
{

window.document.attachEvent("onmousemove",handMouseMove);
window.document.attachEvent("onmouseup",handMouseUp);
}


}
function handMouseMove(e)
{

e = e || event;
var v_div = document.getElementById("divl");

v_div.style.top = (e.clientY - diffY)+"px";
v_div.style.left = (e.clientX - diffX)+"px";

}
function handMouseUp()
{
if(window.document.removeEventListener)
{

window.document.removeEventListener("mousemove",handMouseMove,false);
window.document.removeEventListener("mouseup",handMouseUp,false);
}else
{

window.document.detachEvent("onmousemove",handMouseMove);
window.document.detachEvent("onmouseup",handMouseUp);
}
}
**/
</script>
<style type="text/css">
#divl
{

background-color:#C30;
top:100px;
left:200px;
width:100px;
height:100px;
position:absolute;

}
</style>
</head><body >
<div id="divl"  onmousedown="myHand(event)">nihao</div>

</body>
</html>

解决方案 »

  1.   

    this的指向不对.
    MyDrag.prototype.handMouseMove = function(e) { 
    e = e|| event; 
    var v_div = document.getElementById("divl"); 
    v_div.style.top = (e.clientY - this.diffY)+"px"; //这里的this指的是handMouseMove而不是MyDrag
    v_div.style.left = (e.clientX - this.diffX)+"px"; 
    }
      

  2.   

    ...改成面向对象...  - -！  js本身就是面向对象的，就算你注释掉的东西，还是面向对象的，哪来的改？！e = e || event;  这个根本没必要存在if (event)
    {
    e = event;   这段也没必要存在
    } 最根本问题是你handMouseMove 函数里面this.diffY根本就没取到值，这里的this指向的是document，最简单的方法就是把v_div.style.top = (e.clientY - this.diffY)+"px";
    v_div.style.left = (e.clientX - this.diffX)+"px"; 改成
    v_div.style.top = e.clientY +"px";
    v_div.style.left = e.clientX +"px"; 
    还有，这样写话，你只要在DIV点一次的话，只要鼠标移动handMouseMove这会一直被执行.....因为你handMouseUp这个函数的this也是指向了document
      

  3.   

    那我如何引用到Drag里面的diffy呢？