快捷導(dǎo)航

React Draggable插件如何實(shí)現(xiàn)拖拽功能

更新時(shí)間：2024年07月08日 08:47:43 作者：zhaojiaxing123

這篇文章主要介紹了React Draggable插件如何實(shí)現(xiàn)拖拽功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.下載Draggable插件

npm install react-draggable

2.引入Draggable插件

// 引入拖拽插件
import Draggable from 'react-draggable';

3.設(shè)置一個(gè)div

并設(shè)置樣式，并用Draggable包裹起來(lái)

import "./index.css"
// 引入拖拽插件
import Draggable from 'react-draggable';
export default function IndexPage() {
  return (
    <div>
      {/* 給他設(shè)置一個(gè)父級(jí) */}
      <div className="fu">
        <Draggable >
          <div className="top">
            這是上面的頁(yè)面
          </div>
        </Draggable>
      </div>
    </div>
  );
}

.top {
  background-color: green;
  width: 300px;
  height: 300px;
}
.fu{
  background-color: red;
  width: 800px;
  height: 500px;
  border-end-end-radius: 0;
}

這樣就可以進(jìn)行全局的拖拽，（他是可以拖拽出到屏幕外面的）

4.設(shè)置拖拽的范圍

import "./index.css"
// 引入拖拽插件
import Draggable from 'react-draggable';
export default function IndexPage() {
  return (
    <div>
      <div className="fu">
        <Draggable bounds={{right: 500, left: 0,top:0,bottom:200} }  >
          <div className="top">
            這是上面的頁(yè)面
          </div>
        </Draggable>
      </div>
    </div>
  );
}

這樣就是只能在父級(jí)div中進(jìn)行拖拽

或者可以寫成

import "./index.css"
// 引入拖拽插件
import Draggable from 'react-draggable';
export default function IndexPage() {
  return (
    <div>
      <div className="fu">
        <Draggable bounds={".fu"}  >
          <div className="top">
            這是上面的頁(yè)面
          </div>
        </Draggable>
      </div>
    </div>
  );
}

5.Draggable常用props

allowAnyClick: boolean // 默認(rèn)false，設(shè)為true非左鍵可實(shí)現(xiàn)點(diǎn)擊拖拽
axis: string // 'x'：x軸方向拖拽、'y'：y軸方向拖拽、'none'：禁止拖拽
bounds: { left: number, top: number, right: number, bottom: number } | string 
    // 限定移動(dòng)的邊界，接受值：
    //（1）'parent':在移動(dòng)元素的offsetParent范圍內(nèi)
    //（2）一個(gè)選擇器，在指定的Dom節(jié)點(diǎn)內(nèi)
    //（3）{ left: number, top: number, right: number, bottom: number }對(duì)象，限定每個(gè)方向可以移動(dòng)的距離
cancel：制定給一個(gè)選擇器組織drag初始化，例如'.body'
defaultClassName：string // 拖拽ui類名，默認(rèn)'react-draggable'
drfaultClassNameDragging：string // 正在拖拽ui類名，默認(rèn)'eact-draggable-dragging'
defaultClassNameDragged：string //拖拽后的類名，默認(rèn)'react-draggable-dragged'
defaultPosition：{ x: number, y: number } // 起始x和y的位置
disabled：boolean // true禁止拖拽任何元素
grid：[number, number] // 正在拖拽的網(wǎng)格范圍
handle：string // 初始拖拽的的選擇器'.handle'
offsetParent：HTMLElement // 拖拽的offsetParent
onMouseDown: (e: MouseEvent) => void // 鼠標(biāo)按下的回調(diào)
onStart: DraggableEventHandler // 開始拖拽的回調(diào)
onDrag：DraggableEventHandler // 拖拽時(shí)的回調(diào)
onStop：DraggableEventHandler // 拖拽結(jié)束的回調(diào)
position: {x: number, y: number} // 控制元素的位置
positionOffset: {x: number | string, y: number | string} // 相對(duì)于起始位置的偏移
scale：number // 定義拖拽元素的縮放