react如何实现拖拽组件?如何实现拖拽排序功能呢(拖拽移动位置)?
在定义鼠标按下事件时(MouseDown)我们需要将它的x,y鼠标坐标改为我们的当前鼠标的坐标位置-元素位于我们页面的xy坐标位置,这样就可以获取我们鼠标在元素中的x,y坐标位置。首先实现拖拽必须定义定位为固定定位,我们在组件中定义一个盒子,设置为固定定位,并且设置top值以及left值,这两个由于是变化的因此我们需要定义state值从而拖过拖拽改变该值。移动时需要定义移动鼠标方法(onMouseMove),定义它的位置为当前坐标位置-在页面的坐标位置,这样减去偏移量可以获取到我们移动到的位置。
原创
2023-07-22 10:58:04 ·
5758 阅读 ·
0 评论