react-draggable實現(xiàn)拖拽功能實例詳解

更新時間：2023年08月18日 09:34:31 作者：與掉發(fā)不共戴天

這篇文章主要給大家介紹了關于react-draggable實現(xiàn)拖拽功能的相關資料,React-Draggable一個使元素可拖動的簡單組件,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下

屬性

常用屬性

屬性	默認值	介紹
axis	x	handle拖動的方向，可選值 x ,y,both
handle	無	指定拖動handle的class
position	無	handle的位置，需要實時改變，否則handle無法拖動，類似于react的受控組件
onStrat	方法	拖動開始
onDrag	方法	拖動中
onStop	方法	結束拖動
onMouseDown	方法	觸發(fā)點擊

屬性列表

屬性名稱	說明
bounds	指定移動的邊界值；可以設置的值 left:number,top:number,right:number,bottom:number
group	group= “name”，相同的組之間可以相互拖拽
sort	sort= “true”,是否開啟內(nèi)部排序,如果設置為false,它所在組無法排序，在其他組可以拖動排序
delay	delay= “0”, 鼠標按下后多久可以拖拽
touchStartThreshold	鼠標移動多少px才能拖動元素
disabled	disabled= “true”,是否啟用拖拽組件
animation	拖動時的動畫效果，還是很酷的,數(shù)字類型。如設置animation=1000表示1秒過渡動畫效果
handle	handle=“.mover” 只有當鼠標移動到css為mover類的元素上才能拖動
filter	filter=“.unmover” 設置了unmover樣式的元素不允許拖動
draggable	draggable=“.item” 那些元素是可以被拖動的
ghostClass	ghostClass=“ghostClass” 設置拖動元素的占位符類名,你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true
chosenClass	ghostClass=“hostClass” 被選中目標的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true
dragClass	dragClass="dragClass"拖動元素的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設置成true
dataIdAttr	dataIdAttr: ‘data-id’
forceFallback	默認false，忽略HTML5的拖拽行為，因為h5里有個屬性也是可以拖動，你要自定義ghostClass chosenClass dragClass樣式時，建議forceFallback設置為true
fallbackClass	默認false，克隆的DOM元素的類名
allbackOnBody	默認false，克隆的元素添加到文檔的body中
fallbackTolerance	拖拽之前應該移動的px
scroll	默認true,有滾動區(qū)域是否允許拖拽
scrollFn	滾動回調函數(shù)
scrollSensitivity	距離滾動區(qū)域多遠時，滾動滾動條
scrollSpeed	滾動速度

事件列表

屬性名稱	說明
start	開始拖動時觸發(fā)的事件
add	從一個數(shù)組拖拽到另外一個數(shù)組時觸發(fā)的事件
remove	移除事件
update	拖拽變換位置時觸發(fā)的事件
end	拖拽完成時的事件
choose	鼠標點擊選中要拖拽元素時的事件
unchoose	選中后松開鼠標的事件
sort	位置變化時的事件
clone	從一個數(shù)組拖拽到另外一個數(shù)組時觸發(fā)的事件和add不同，clone是復制了數(shù)組元素
move	自定義控制那些元素可以拖拽或不允許拖拽并控制是否允許停靠

舉例

首先安裝 react-draggable

yarn add react-draggable / npm i react-draggable

在頁面中導入react-draggable

import Draggable from 'react-draggable'

實現(xiàn)移動

在Draggable 中必須要用一個容器來包裹住你要拖動的東西，否則不能用

1.基本

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

效果

請?zhí)砑訄D片描述

2. 初始化開始位置

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

效果

請?zhí)砑訄D片描述

3. 限制拖拽范圍

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

效果

請?zhí)砑訄D片描述

4. 限制拖拽內(nèi)容

 <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>

效果

請?zhí)砑訄D片描述