关于使用鼠标时间mouseMove拖拽元素及元素抖动的解决方案

最近在做一个画布相关的项目时有一个场景是移动画布，最先开始想到的是拖拽事件，但是用户希望元素是实时的变化，所以决定使用mouseMove事件来做。

---

思路

1. 通过mouseDown事件确定鼠标按下的位置
2. 根据mouseMove事件来计算出鼠标相对初始状态的横向位移距离和纵向的位移距离
3. 获取元素的位置然后加上位移的距离并重新设置样式。

实现

首先我们应该通过给元素绑定相关的鼠标事件

<canvas
        id="canvas"
        style={{
          top: canvasPositionTop + "px",
          left: canvasPositionLeft + "px",
        }}
        onMouseDown={(e) => mouseDownHandle(e.nativeEvent)}
        onMouseMove={(e) => mouseMoveHandle(e.nativeEvent)}
        onMouseUp={(e) => mouseUpHandle(e.nativeEvent)}
      ></canvas>

创建三个state，他们的作用分别为一个是判断是否允许操作，一个是保存鼠标初始位置，还有一个是记录元素的初始位置。然后我们可以通过鼠标按下事件去获取鼠标的初始坐标

const [isStart, setIsStart] = useState(false);
const [dragBeforePosition, setDragBeforePosition] = useState([0, 0]);
const [dragInitCoordinate, setDragInitCoordinate] = useState([0, 0]);

 const mouseDownHandle = (e) => {
    setIsStart(true);
    setDragInitCoordinate([e.clientX, e.clientY]);
  };

接着我们可以借助鼠标移动事件实时计算出鼠标的位移距离，鼠标的位移距离我们就可以当做是元素的位移。我们使用两个state去保存这个位移值。

const [canvasPositionLeft, setCanvasPositionLeft] = useState(0); 
const [canvasPositionTop, setCanvasPositionTop] = useState(0); 
const mouseMoveHandle = (e) => {
    if (!isStart) {
      return;
    }
     dragCanvasHandle(e);
  }; 

const dragCanvasHandle = (e) => {
    let [x, y] = [e.clientX, e.clientY];
    let [initX, initY] = dragInitCoordinate;
    let canvasOffsetX = x - initX;
    let canvasOffsetY = y - initY;
    setCanvasPositionLeft(dragBeforePosition[0] + canvasOffsetX);
    setCanvasPositionTop(dragBeforePosition[1] + canvasOffsetY);
  }

拿到位移值以后我们就可以对元素的位置进行更改。我们可以使用定位或者元素的margin值，具体使用视情况而定，我这里是用的是定位。

当然这是很简单的实现，具体可需要进行优化，接下来要说的是一个优化点。

抖动

如果是按上面的代码去拖拽是没有任何问题的，但是上面的代码是更改后的代码。如果我们在确定鼠标位置的时候使用的是offsetX和offsetY而不是clientX和clientY就会出现下面的情况

可以看到抖动还是很明显的，起初我以为是state更新导致的重新渲染引起的，但是我发现在缓慢拖动的时候也会出现抖动的情况，起初不确定原因，但是在我尝试防抖节流以及requestAnimationFrame后我可以确定抖动是坐标计算导致的。但是我一遍一遍的排查发现计算逻辑是没有问题的，那么问题只在取值上。在排查以后发现是使用属性的问题，我最初取值使用的是offsetX，而offsetX是鼠标和元素内边框的距离，所以当鼠标移动的时候元素本身也在移动，这样就导致取值的时候会出现问题，而当我们使用clientX的时候，这个时候鼠标的位置是相对页面来计算的，这样能确保当元素的位置更改时我们的取值不会收到影响。