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

思路

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

实现

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

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

创建三个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的时候，这个时候鼠标的位置是相对页面来计算的，这样能确保当元素的位置更改时我们的取值不会收到影响。