JS实现鼠标拖拽div时设置style.left/top样式不生效怎么办

• 核心原因：CSS中top、left这类位置偏移属性，仅对非static定位的元素生效。你代码里的div默认是position: static（静态定位，是元素的默认定位模式），这种模式下元素按照正常文档流排布，手动设置top/left不会产生任何位置偏移效果。
• 隐藏逻辑bug：你当前把mousemove和mouseup事件都绑定在div元素上，如果拖拽过程中鼠标移动速度过快移出div范围，会出现事件监听丢失问题：要么盒子无法跟随鼠标移动，要么鼠标松开后盒子仍然跟随鼠标移动，事件解绑失效。

• 给拖拽的div元素添加非静态定位，拖拽场景最常用的是position: absolute，让top/left属性可以正常控制元素位置。
• 把mousemove（拖拽移动逻辑）、mouseup（拖拽结束逻辑）的事件监听绑定到document上，保证鼠标在页面任意位置移动、松开都能触发对应逻辑，避免事件监听丢失。
• 补充局部变量声明，避免计算偏移量的x、y变量变成隐式全局变量污染全局作用域。

修复后可正常运行的完整代码如下：

<html>
  <head>
    <style>
      div{
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 新增绝对定位，让left/top配置生效 */
        position: absolute;
      }
    </style>
  </head>

  <body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        div.addEventListener('mousedown', function(e){
            // 声明局部变量存储鼠标按下时的偏移差值
            const x = e.pageX - div.offsetLeft;
            const y = e.pageY - div.offsetTop;
            // 事件绑定到document，避免鼠标移出div后事件失效
            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', handleMouseUp)

            function move(e) {
                div.style.left = e.pageX - x + 'px';
                div.style.top = e.pageY - y + 'px';
            }
            function handleMouseUp() {
              // 鼠标松开时移除移动和松开事件监听，终止拖拽
              document.removeEventListener('mousemove', move)
              document.removeEventListener('mouseup', handleMouseUp)
            }
        }) 
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者haojie。