哪位大侠能帮我把这段移动div的js代码解读下！~~急！~~

Question

var dragobject={
z: 0,
x: 0,
y: 0,
offsetx : null,
offsety : null,
targetobj : null,
dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()

Answer 1

dragobject.initialize()//给鼠标的动作加上监听
如果鼠标按下就执行drag方法
drag方法是用来确认需要移动的div元素，判断它的位置，发给他移动证书- -!
然后drag就把这个div交给了moveit大叔，大叔检查过了它的移动证书，就让他跟着鼠标走了
然后松开鼠标的时候收回证书。。哦也~我是个讲故事的天才

drag:function(e){
var evtobj=window.event? window.event : e//获得鼠标事件e
this.targetobj=window.event? event.srcElement : e.target//获得鼠标时间的目标对象div
if (this.targetobj.className=="drag"){//如果这个目标对象可以移动的话
this.dragapproved=1//领导批准移动！
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}//如果取不到这个目标对象到左边的绝对距离就设定目标对象的绝对left=0
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}//如果取不到这个目标对象到上边的绝对距离就设定目标对象的绝对top=0
this.offsetx=parseInt(this.targetobj.style.left)//获得目标对象的left距离
this.offsety=parseInt(this.targetobj.style.top)//获得目标对象的top距离
this.x=evtobj.clientX//获得当前鼠标的位置x(对应left)
this.y=evtobj.clientY//获得当前鼠标的位置y(对应top)
if (evtobj.preventDefault)//如果这个事件有默认动作的话
evtobj.preventDefault()//取消默认动作的执行
document.onmousemove=dragobject.moveit//然后在鼠标移动的过程中执行moveit方法
}
},

moveit:function(e){
var evtobj=window.event? window.event : e//获得当前的鼠标事件
if (this.dragapproved==1){//如果允许移动，意思就是当前div是可以移动的，前面做过判断了
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"//目标div的坐标x变成计算出来的，懒得算了。。你自己看
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"//目标div的坐标y变成计算出来的
return false
}
}
然后鼠标松开后，又恢复成不能移动的状态，所以要把dragapproved设置为0

Answer 2

整段代码其实就2句：
第一句：var dragobject={...}，声明一个名叫dragobject的对象。
第二句：dragobject.initialize()，调用这个对象的initialize方法。
解释下第一段代码。var dragobject = { 。。。} ，{}表示它是一个object。{}中的都是它的属性和方法。比如z:0，表示这个属性名称为z，值为0。
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},表示方法，方法名为initialize， 调用后执行{}内的代码。追问

这个我知道，语法我都知道吗，就是逻辑不懂。能不能把这个逻辑帮我理一下？有点迷惑，这个是怎样达到移动DIV这个效果的。

追答

drag:function(e){
var evtobj=window.event? window.event : e; //获取对象的事件状态，IE支持window.event, FF是e
this.targetobj=window.event? event.srcElement : e.target; //目标对象,就是获取触发事件的对象
if (this.targetobj.className=="drag"){ //只有当这个对象的class为drag的时候才能拖动
this.dragapproved=1; //这是个标志为,表示开始移动了.
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}; //如果目标对象的left和top值不是一个整数,则初始化为0
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}; //同上
this.offsetx=parseInt(this.targetobj.style.left); //将目标对象的left和top值存起来, 回头计算坐标的时候用.
this.offsety=parseInt(this.targetobj.style.top); //同上
this.x=evtobj.clientX; //clientX获取鼠标指针向对于浏览器页面（或客户区）的水平坐标, 也存起来,后面moveit的计算中会使用
this.y=evtobj.clientY; //同上
if (evtobj.preventDefault)
evtobj.preventDefault(); //取消事件的默认动作
document.onmousemove=dragobject.moveit; //移动鼠标的时候,调用moveit方法,根据鼠标的位移,移动目标对象
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"; //这里是个计算,原先的left值(drag方法中存好的), 加上鼠标现在的x坐标,减去鼠标移动前的x坐标(这个也是drag方法中存好的),再加上"px"是单位, 并且赋值给目标对象, 这样对象就跟着鼠标动起来了.
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}

最后回到initialize方法中的document.onmouseup=function(){this.dragapproved=0}，将dragapproved设为0，意思是移动结束了。。。

本回答被提问者采纳