最近在做一个画布相关的项目时有一个场景是移动画布，最先开始想到的是拖拽事件，但是用户希望元素是实时的变化，所以决定使用mouseMove事件来做。
思路
- 通过
mouseDown事件确定鼠标按下的位置 - 根据
mouseMove事件来计算出鼠标相对初始状态的横向位移距离和纵向的位移距离 - 获取元素的位置然后加上位移的距离并重新设置样式。
实现
首先我们应该通过给元素绑定相关的鼠标事件
<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就会出现下面的情况
文章来源：https://www.toymoban.com/news/detail-494758.html
可以看到抖动还是很明显的，起初我以为是state更新导致的重新渲染引起的，但是我发现在缓慢拖动的时候也会出现抖动的情况，起初不确定原因，但是在我尝试防抖节流以及requestAnimationFrame后我可以确定抖动是坐标计算导致的。但是我一遍一遍的排查发现计算逻辑是没有问题的，那么问题只在取值上。在排查以后发现是使用属性的问题，我最初取值使用的是offsetX，而offsetX是鼠标和元素内边框的距离，所以当鼠标移动的时候元素本身也在移动，这样就导致取值的时候会出现问题，而当我们使用clientX的时候，这个时候鼠标的位置是相对页面来计算的，这样能确保当元素的位置更改时我们的取值不会收到影响。文章来源地址https://www.toymoban.com/news/detail-494758.html
到了这里，关于关于使用鼠标时间mouseMove拖拽元素及元素抖动的解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
