用JS实现版面拖拽效果

2024-08-18 00:22:31 225人阅读

技术分享

添加onmousedown事件

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

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

// 光标按下时光标和面板之间的距离
      disX=event.clientX-oDrag.offsetLeft,
      disY=event.clientY-oDrag.offsetTop;

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

// 计算位置并设置
    l=event.clientX-disX;
　　t=event.clientY-disY;
　　oDrag.style.left=l+"px";
　　oDrag.style.top=t+"px";

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

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

// 释放鼠标
  document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null;
  }

用JS实现版面拖拽效果

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们