用JS实现版面拖拽效果

Posted 2020-08-16

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

添加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;
  }