拖拽这种交互,可以延伸出很多具体的使用方式,接下来介绍的这些属性设定,能帮你解决绝大部分场景下需要的拖拽效果。
dragSnapToOrigin
元素在拖拽放手后是否回到初始位置
布尔值
默认是false
设置为true,那么元素会自动返回开始拖拽前的初始位置,返回动画具有一定的弹性效果
dragConstraints
设置元素可被拖拽的区域
false
默认值 即可以拖拽只任意方向任意位置
object
一个对象{}
这个对象可以包含四个方向的属性,即top 上、left 左、right 右、bottom 下。可以只设置一个或多个,也可以全部设置。
这四个值其实就是以元素本身上下左右的边为起点的四根边界线,分别距离起始位置多少,从而形成一个元素可拖拽的四边的范围,如果只设置其中一个值或者几个值,那么相当于是只有设置的方向有限制效果。
top和bottom正值往下移动,负值往上移动。left和right正值向右移动,负值向左移动。
这个限制的作用和Inertia变化模式中的min和max属性的作用是类似的。
![](https://framerusercontent.com/images/Mz2x3z4rYi1QMmeZCVuH9hRc5E.png?scale-down-to=1024)
Refobject
一个Ref对象
通过useRef获取到元素的引用,把元素的区域设置为该元素的限制拖动区域(一般是父元素)
dragElastic
用来设定可以超出拖拽边界的程度,相当于也是回弹的力度
配合dragConstraints使用,默认值是0.5,最小为0,最大为1。
也可以设置fasle,让拖拽到边界时完全不能超过边界。
如果传入一个对象,可以分别设置top,bottom,left和right方向的可以超过的程度,如果设置时没有全部设置,那么没有设置的就会被自动设置成0。
#
限制拖拽范围
#
特殊控制
拖动子元素带动父元素
dragPropagation
如果父子元素都是可拖拽的,拖动子元素是否会带动父元素
默认是fasle,即拖动子元素是不会带动父元素的
这个属性设置在父元素或者子元素上都会起作用,但是建议设置在父元素上
通过其他元素来控制某个元素的拖动行为
在某些情况下,我们会需要通过某个元素来控制一个元素的拖动,要实现这样的效果,我们需要两个属性以及一个hook配合:
dragListener dragControls useDragControls
核心其实是利用useDragControls产生的实例来控制某个元素的拖动,这个实例上有一个start方法。
![](https://framerusercontent.com/images/e72kJUzn0dyFPzghTo0i7fT4.png?scale-down-to=1024)
dragListener
元素是否监听drag的行为从而实现拖拽效果
布尔值
默认是true
当这个元素的dragControls被设置了useDragControls实例,如果你不希望这个元素还能因为自身被拖拽而移动,那么这个属性就要设置成false。
dragControls
传入useDragControls实例
当想要通过别的元素来控制这个元素的拖拽行为时,要使用这个属性。