React实现拖拽效果

最近遇到一个拖拽的业务,那么我们需要了解一下拖拽的流程,让我们来实现这个组件吧。

一.拖拽流程

编写项目之前我们先了解一下拖拽大致的流程,以及触发的事件。

其实拖拽一共分为三个步骤:

1.onmousedown:拖拽事件的最开始,在这个简单我们要记录物体的原始坐标。

2.onmousemove:拖拽物体触发的事件,在这个阶段我们要记录实时的坐标,然后与原坐标进行计算,给物体赋予最新的坐标。

3.onmouseup:取消拖拽事件。结束拖拽。

拖拽事件的流程:onmousedown -> onmousemove -> onmouseup ->click事件

二.代码流程

 

有的同学可能在拖拽的时候,会触发点击事件,我是在onmousedown中获取最新时间,在onmouseup获取最后时间,然后在触发点击事件进行判断。

猜你喜欢

转载自blog.csdn.net/qq_45865171/article/details/127032106