js判断鼠标拖拽div div块位置错误

Question

在用js判断鼠标拖拽div ，第一次点击的时一切正常，当再次点击div，div会从0开始变化。

<div class="d2" id="d2" style="height:30px  ">
    <div class="dv" id="dv" style="height:20px; "></div>
    </div>
 <script type="text/javascript">


      var dv = document.getElementById('dv');
      var x = 0;
      var y = 0;
      var l = 0;
      var t = 0;
      var isDown = false;

      window.onload = function () {
          var mouseoffsetX = 0;
          var moveX = 0;
          var isDraging = false;//记录元素是否可以拖动

          //鼠标事件1
          get('dv').addEventListener('mousedown', function (e) {
              var e = e || window.event;

              //鼠标距离div左侧偏移距离=e.pageX鼠标距离页面左侧距离-get('movr').offsetLeft为div距离左侧距离
              mouseoffsetX = e.pageX - get('d2').offsetLeft;
           
              isDraging = true;
          })

          //鼠标事件2

          document.onmousemove = function (e) {
              var e = e || window.event;
               
            
              if (isDraging == true) {
                  // div左侧距离页面左侧距离 = e.pageX鼠标距离页面左侧距离 - mouseOffsetX鼠标距离div左侧偏移距离
                  moveX = e.pageX - mouseoffsetX;
                  if (moveX > 0) {
                      //dv.style.transform = "translate3d(" + moveX + "px,0px,0px)";
                      dv.style.left = moveX + "px";
                  }
              }
          }

          document.onmouseup = function () {
              isDraging = false;
              //dv.style.transform = "translate3d(" + moveX + "px,0px,0px)";
          }
          function get(id) {
              return document.getElementById(id);
          }
      }
 </script>

运行结果及详细报错内容

这是第二次触发后的图片，绿色为鼠标位置

我刚开始觉着是translate3d的问题，后面就用直接修改left值，可是效果还是一样。

Answer 1

css发一下