使用jQuery的dragstart与dragend捕获拖拽起始位置及位移量

我来帮你完善代码，实现捕获拖拽起始位置、计算位移量并传递给处理函数的需求。这里是完整的实现方案：

完整代码实现 #

<style>
  body { padding: 0; margin: 0; }
  .wrapper { 
    width: 1800px; 
    height: 2500px; 
    background: #86CDEA; 
    cursor: grab; /* 给拖拽元素加个拖拽光标，提升交互体验 */
  }
</style>

<div class="wrapper" draggable="true"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 存储拖拽初始位置的变量
  let dragStartPos = { x: 0, y: 0 };

  $(".wrapper").on("dragstart", function(event) {
    // 记录拖拽开始时的鼠标初始位置（基于视口的坐标）
    dragStartPos.x = event.originalEvent.clientX;
    dragStartPos.y = event.originalEvent.clientY;
    
    // 修复部分浏览器拖拽失效问题：必须设置拖拽数据标识
    event.originalEvent.dataTransfer.setData('text/plain', '');
  });

  $(".wrapper").on("drag", function(event) {
    // 计算当前拖拽的X、Y方向位移量
    const displacementX = event.originalEvent.clientX - dragStartPos.x;
    const displacementY = event.originalEvent.clientY - dragStartPos.y;
    
    // 将初始位置和位移量传递给后续处理函数
    handleDragData(dragStartPos, displacementX, displacementY);
  });

  // 自定义的拖拽数据处理函数，你可以在这里实现业务逻辑
  function handleDragData(startPos, deltaX, deltaY) {
    console.log("拖拽初始位置:", startPos);
    console.log("X方向位移:", deltaX);
    console.log("Y方向位移:", deltaY);
    // 示例：根据位移更新元素样式/发送请求等
    // $(this).css('transform', `translate(${deltaX}px, ${deltaY}px)`);
  }
</script>

关键细节说明 #

• 初始位置捕获：在dragstart事件中，通过event.originalEvent.clientX/Y获取拖拽开始时的鼠标视口坐标（注意要用originalEvent，因为jQuery封装的事件对象未直接暴露DragEvent原生属性），并存储到全局变量中。
• 位移量计算：在drag事件（拖拽过程中持续触发）里，用当前鼠标坐标减去初始坐标得到位移量。如果只需要拖拽结束时的最终位移，可将计算逻辑移到dragend事件中。
• 数据传递：调用自定义的handleDragData函数，把初始位置对象和位移量作为参数传入，你可以在这个函数里实现任何后续业务逻辑。
• 浏览器兼容处理：在dragstart中设置dataTransfer.setData是因为部分浏览器（如Chrome）要求必须定义拖拽数据，否则拖拽功能会失效。

可选优化方案 #

如果你需要跟踪元素自身的位置变化而非鼠标位置，可以修改初始位置的捕获方式：

$(".wrapper").on("dragstart", function(event) {
  const elementOffset = $(this).offset();
  dragStartPos.x = elementOffset.left;
  dragStartPos.y = elementOffset.top;
});

之后在拖拽过程中，结合元素当前的offset()计算位移，这种方式适合需要精准控制元素位置的场景。

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