快捷導(dǎo)航

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

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

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

屬性

常用屬性

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

屬性列表

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

事件列表

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

舉例

首先安裝 react-draggable

yarn add react-draggable / npm i react-draggable

在頁面中導(dǎo)入react-draggable

import Draggable from 'react-draggable'

實(shí)現(xiàn)移動(dòng)

在Draggable 中必須要用一個(gè)容器來包裹住你要拖動(dòng)的東西，否則不能用

1.基本

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

效果

請(qǐng)?zhí)砑訄D片描述

2. 初始化開始位置

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

效果

請(qǐng)?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>

效果

請(qǐng)?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>

效果

請(qǐng)?zhí)砑訄D片描述