用react实现手机端限制拖拽实现

手机端和pc端实现的事件不一样 在手机端中需要通过 touchstart和touchmove两个事件实现 因为在手机端事件中在移动过程中不会像pc端一样如果没有moveup事件元素会一直跟随鼠标所以只需要两个事件即可完成

 

 

注意： 首先第一步也是最重要的就是要给要拖拽的元素设置position定位 要设置为绝对定位 absolute 理由是如果我们设置元素为相对定位的时候 如果我们有需求 要添加多个元素在一个限制框中都要实现拖拽的时候会出现bug  原因是因为 relative相对定义会占位 这时候我们添加多个可能会讲元素挤出限制的盒子

之后 我们需要先给要拖拽的元素绑定一个onTouchStart事件

 

之后我们定义四个全局变量

在触摸事件的event事件中有touches/changedTouches/targetTouches三个属性他们的值都相同

1. touches: 当前屏幕上所有触摸点的列表;

2. targetTouches: 当前对象上所有触摸点的列表;

3. changedTouches: 涉及当前(引发)事件的触摸点的列表

 在这里用那个都行然后

 pageX和pageY分别代表鼠标点击的位置距离页面左上角的距离

offsetLeft / offsetTop

1. 如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
2. 如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。

如果有固定的盒子为限制就获取那个盒子的可视区宽度和高度 如果没有就获取body元素的可视区高度和宽度

 

 之后求出移动距离 当我们在执行move事件的时候也会获取一个pageX 然后用这个值减去我们start开始位置的pageX再加上我们当前盒子距离页面左边距的高度和宽度 就可以求出移动距离

最后

通过if判断设置最低的移动距离和最高的移动距离 如果当前元素是页面的左上角则最小设置为0 如果限制的盒子被排到了下面那么求出他距离页面左上脚的宽高然后设置为最小值并且在最大值的位置也加上这个值 

最后上效果