基于jQuery实现可拖拽Div存在异常——拖拽时鼠标光标跳动问题排查

这个光标跳动的问题我之前也碰到过，核心原因很简单：你直接把元素的左上角位置绑定到了鼠标的pageX/pageY，但没有考虑点击时鼠标在元素内的相对位置。

举个例子：当你点击元素的中间位置时，鼠标相对于元素左上角的坐标是(20,20)，但你直接把元素的top/left设为e.pageY/e.pageX，相当于把元素瞬间移到鼠标正下方——这时候元素的左上角跑到了鼠标位置，视觉上就会出现“跳一下”的错觉，也就是你看到的光标跳动。

下面是修正后的完整代码，我加了关键的偏移量计算：

JavaScript 部分 #

var $dragging = null;
var offsetX, offsetY; // 存储鼠标相对于拖拽元素的偏移距离

$(document.body).on("mousedown", ".titleDraggble", function (e) {
  $dragging = $(this);
  // 计算点击时，鼠标在元素内的相对坐标
  offsetX = e.pageX - $dragging.offset().left;
  offsetY = e.pageY - $dragging.offset().top;
  // 阻止浏览器默认选中行为，优化拖拽体验
  e.preventDefault();
});

$(document.body).on("mousemove", function(e) {
  if ($dragging) {
    // 用鼠标当前位置减去偏移量，保持点击时的相对位置不变
    $dragging.offset({ 
      top: e.pageY - offsetY, 
      left: e.pageX - offsetX 
    });
  }
});

$(document.body).on("mouseup", function (e) {
  $dragging = null;
});

CSS 部分 #

.titleDraggble {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 20px;
  top: 20px;
  border: 1px solid #000;
  cursor: move;
}

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titleDraggble"></div>

这样修改后，元素会始终跟着你点击时的鼠标相对位置移动，光标跳动的问题就解决了。另外加上e.preventDefault()能避免拖拽时不小心选中页面上的文本，体验会更顺滑～

内容的提问来源于stack exchange，提问作者Sanjeev Kumar