1.下载Draggable插件
npm install react-draggable
2.引入Draggable插件
// 引入拖拽插件 import Draggable from 'react-draggable';
3.设置一个div，并设置样式，并用Draggable包裹起来
import "./index.css" // 引入拖拽插件 import Draggable from 'react-draggable'; export default function IndexPage() { return ( <div> {/* 给他设置一个父级 */} <div className="fu"> <Draggable > <div className="top"> 这是上面的页面 </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; }
这样就可以进行全局的拖拽，（他是可以拖拽出到屏幕外面的）
4.设置拖拽的范围
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"> 这是上面的页面 </div> </Draggable> </div> </div> ); }
这样就是只能在父级div中进行拖拽
或者可以写成
import "./index.css" // 引入拖拽插件 import Draggable from 'react-draggable'; export default function IndexPage() { return ( <div> <div className="fu"> <Draggable bounds={".fu"} > <div className="top"> 这是上面的页面 </div> </Draggable> </div> </div> ); }
5.Draggable常用props
allowAnyClick: boolean // 默认false，设为true非左键可实现点击拖拽 axis: string // 'x'：x轴方向拖拽、'y'：y轴方向拖拽、'none'：禁止拖拽 bounds: { left: number, top: number, right: number, bottom: number } | string // 限定移动的边界，接受值： //（1）'parent':在移动元素的offsetParent范围内 //（2）一个选择器，在指定的Dom节点内 //（3）{ left: number, top: number, right: number, bottom: number }对象，限定每个方向可以移动的距离 cancel：制定给一个选择器组织drag初始化，例如'.body' defaultClassName：string // 拖拽ui类名，默认'react-draggable' drfaultClassNameDragging：string // 正在拖拽ui类名，默认'eact-draggable-dragging' defaultClassNameDragged：string //拖拽后的类名，默认'react-draggable-dragged' defaultPosition：{ x: number, y: number } // 起始x和y的位置 disabled：boolean // true禁止拖拽任何元素 grid：[number, number] // 正在拖拽的网格范围 handle：string // 初始拖拽的的选择器'.handle' offsetParent：HTMLElement // 拖拽的offsetParent onMouseDown: (e: MouseEvent) => void // 鼠标按下的回调 onStart: DraggableEventHandler // 开始拖拽的回调 onDrag：DraggableEventHandler // 拖拽时的回调 onStop：DraggableEventHandler // 拖拽结束的回调 position: {x: number, y: number} // 控制元素的位置 positionOffset: {x: number | string, y: number | string} // 相对于起始位置的偏移 scale：number // 定义拖拽元素的缩放
