react-draggable实现拖拽详解

react-draggable

属性

常用属性

属性默认值介绍axisxhandle拖动的方向，可选值 x ,y,bothhandle无指定拖动handle的classposition无handle的位置，需要实时改变，否则handle无法拖动，类似于react的受控组件onStrat方法拖动开始onDrag方法拖动中onStop方法结束拖动onMouseDown方法触发点击

属性列表

属性名称说明bounds指定移动的边界值；可以设置的值 left:number,top:number,right:number,bottom:numbergroupgroup= “name”，相同的组之间可以相互拖拽sortsort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序delaydelay= “0”, 鼠标按下后多久可以拖拽touchStartThreshold鼠标移动多少px才能拖动元素disableddisabled= “true”,是否启用拖拽组件animation拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果handlehandle=“.mover” 只有当鼠标移动到css为mover类的元素上才能拖动filterfilter=“.unmover” 设置了unmover样式的元素不允许拖动draggabledraggable=“.item” 那些元素是可以被拖动的ghostClassghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truechosenClassghostClass=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truedragClassdragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truedataIdAttrdataIdAttr: ‘data-id’forceFallback默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为truefallbackClass默认false，克隆的DOM元素的类名allbackOnBody默认false，克隆的元素添加到文档的body中fallbackTolerance拖拽之前应该移动的pxscroll默认true,有滚动区域是否允许拖拽scrollFn滚动回调函数scrollSensitivity距离滚动区域多远时，滚动滚动条scrollSpeed滚动速度

事件列表

属性名称说明start开始拖动时触发的事件add从一个数组拖拽到另外一个数组时触发的事件remove移除事件update拖拽变换位置时触发的事件end拖拽完成时的事件choose鼠标点击选中要拖拽元素时的事件unchoose选中后松开鼠标的事件sort位置变化时的事件clone从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素move自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠

举例

首先安装 react-draggable

yarn add react-draggable / npm i react-draggable

在页面中导入react-draggable

import Draggable from 'react-draggable'

实现移动

在Draggable 中必须要用一个容器来包裹住你要拖动的东西，否则不能用

1. 基本

<Draggable size={200}><div><div className='mover'></div><div className='unmover'>
             asdasdasd
        </div></div></Draggable>

效果

2. 初始化开始位置

<Draggable size={200} defaultPosition={{ x:25, y:25}}><div><div className='mover'></div><div className='unmover'>
             asdasdasd
        </div></div></Draggable>

效果

3. 限制拖拽范围

<Draggable size={200} defaultPosition={{ x:25, y:25}} 
 bounds={{ top:0}}><div><div className='mover'></div><div className='unmover'>
             asdasdasd
        </div></div></Draggable>

效果

4. 限制拖拽内容

<Draggable size={200} defaultPosition={{ x:25, y:25}} 
 bounds={{ top:0}}
 handle=".mover"
 filter=".unmover"><div><div className='mover'></div><div className='unmover'>
             asdasdasd
        </div></div></Draggable>

效果

希望小编写的能够帮助到你😘