新人学习JS,求解析一下下面的代码,

无聊看风景 2014-12-21 11:42:49

本人刚刚学习javascript,发现js的变量对象之间的赋值搞不清,和以前学习的java有点不习惯,
下面是一个
动态拖动div的代码,希望给小弟注释一下代码,谢谢

function $(_sId){return document.getElementById(_sId);}



function moveStart (event, _sId){

   var oObj = $(_sId);

   oObj.onmousemove = mousemove;



   oObj.onmouseup = mouseup;

   oObj.setCapture ? oObj.setCapture() : function(){};

   oEvent = window.event ? window.event : event;

   var dragData = {x : oEvent.clientX, y : oEvent.clientY};

   var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};

   

   function mousemove(){ //鼠标移动时的方法

    var oEvent = window.event ? window.event : event;



	var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);

    var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);

    oObj.style.left = iLeft;

    oObj.style.top = iTop;

    dragData = {x: oEvent.clientX, y: oEvent.clientY}; 

   }

   

   function mouseup(){ //放开鼠标键时的方法

    var oEvent = window.event ? window.event : event;

	

    oObj.onmousemove = null;

    oObj.onmouseup = null;

    if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){

     oObj.style.left = backData.y;

     oObj.style.top = backData.x;

    }

    oObj.releaseCapture ? oObj.releaseCapture() : function(){};

   }

}

...全文

200 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

ikscher 2014-12-23

打赏
举报

初学看这种代码不是找事吗，怎么没有mousedown

无聊看风景 2014-12-21

打赏
举报

这个代码是不是仅能动态拖动div呢?别的就不行?

MnZlZ 2014-12-21

打赏
举报


//$(_sld)函数用来生成id名为sld的html标签对象，参数可以是任何的html标签
function $(_sId){return document.getElementById(_sId);}
 
function moveStart (event, _sId){ //连个参数，event 是方法的事件参数，_sld是html标签的id
   var oObj = $(_sId); //调用函数$(_sld)，并把html object对象引用给oObj；
                                     //相当于： var oObj=document.getElementById('_sld');
   oObj.onmousemove = mousemove; //给oObj添加鼠标移动事件，当鼠标移动时调用函数 mousemove();
 
   oObj.onmouseup = mouseup; //给oObj添加鼠标抬起事件，当鼠标抬起时调用函数 mouseup();
   oObj.setCapture ? oObj.setCapture() : function(){}; //这里做一个鼠标捕获
   oEvent = window.event ? window.event : event;  //给oEvent引用一个方法的事件
   var dragData = {x : oEvent.clientX, y : oEvent.clientY}; //数组，获得鼠标点击的x，y坐标
   var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)}; 通过函数处理得到oObj对象的x，y坐标
    
  //mousemove()方法就是在鼠标移动的同时，获得鼠标的x，y坐标，然后赋值给oObj对象
   function mousemove(){ //鼠标移动时的方法
    var oEvent = window.event ? window.event : event;
 
    var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
    var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
    oObj.style.left = iLeft;
    oObj.style.top = iTop;
    dragData = {x: oEvent.clientX, y: oEvent.clientY}; 
   }
    
   function mouseup(){ //放开鼠标键时的方法
    var oEvent = window.event ? window.event : event;
     
    oObj.onmousemove = null; //停止函数调用
    oObj.onmouseup = null;//停止函数调用
    if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
     oObj.style.left = backData.y;
     oObj.style.top = backData.x;
    }
    oObj.releaseCapture ? oObj.releaseCapture() : function(){};
   }
}