vue3中鼠标拖拽div时位置会抖动一下?

2023-06-20 294 0

当鼠标按下拖拽某div时,位置会跳一下,这个怎么解决?

https://play.vuejs.org/#eNqlV29v20QY/yqHVamOlDmFl6GtxjQESExIE...

修改了一下:
image.pngimage.png

demo:

<style>
  #Drag {
      /*border: 5px solid #C4E3FD;*/
      background: #C4E3FD;
      width: 50px;
      height: 50px;
      top: 50px;
      left: 50px;
      z-index: 2;
  }
</style>
<div id="Drag" onmousedown="moveBind(this, event)">1</div>
</div>
<br />拖放状态:<span id="idShow">未开始</span>
<script>
  function moveBind(obj, evnt) {
      //获得元素坐标。
      var left = obj.offsetLeft;
      var top = obj.offsetTop;
      var width = obj.offsetWidth;
      var height = obj.offsetHeight;
      //计算出鼠标的位置与元素位置的差值。
      var cleft = evnt.clientX - left;
      var ctop = evnt.clientY - top;
      document.onmousemove = function (doc) {
          //计算出移动后的坐标。
          var moveLeft = doc.clientX - cleft;
          var moveTop = doc.clientY - ctop;
          //设置成绝对定位,让元素可以移动。
          obj.style.position = "absolute";
          //当移动位置在范围内时,元素跟随鼠标移动。
          obj.style.left = moveLeft + "px";
          obj.style.top = moveTop + "px";
          show("idShow", moveLeft, moveTop);
      }
      document.onmouseup = function () {
          document.onmousemove = function () { }
      };
  }
</script>

解决你的问题的核心是这个:
image.png

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?