用JS实现版面拖拽效果

类似于这样的一个版面，点击标题栏，实现拖拽效果。

添加onmousedown事件

通过获取鼠标的坐标（clientX,clientY）来改变面板的位置

注意：面板使用绝对定位方式，是以左上角为参考点，所以我们还需要获取鼠标在面板的位置，也就是以鼠标所在位置为参考点。

// 光标按下时光标和面板之间的距离

      disX=event.clientX-oDrag.offsetLeft,

      disY=event.clientY-oDrag.offsetTop;

添加onmousemove事件

在获取了鼠标相对于面板的位置后，设置面板的left，和top为鼠标坐标与对应这个值之差即可。

// 计算位置并设置

    l=event.clientX-disX;

　　t=event.clientY-disY;

　　oDrag.style.left=l+"px";

　　oDrag.style.top=t+"px";

 

思考？能不能直接把letf和top的值设置为面板的offsetLeft和offsetTop属性，在数学表达式中值是相等的。

　　不能，整个过程需要分为这两个步骤！！！

添加 onmouseup事件

// 释放鼠标

  document.onmouseup=function(){

      document.onmousemove=null;

      document.onmouseup=null;

  }