深圳市住房和建设局网站,网站建设期任务及总结,2022年时事新闻摘抄,哪些网站可以接单做React Draggable插件实现拖拽功能1.下载Draggable插件2.引入Draggable插件3.设置一个div#xff0c;并设置样式#xff0c;并用Draggable包裹起来4.设置拖拽的范围5.Draggable常用props1.下载Draggable插件
npm install react-draggable2.引入Draggable插件
// 引入拖拽插件…
React Draggable插件实现拖拽功能1.下载Draggable插件2.引入Draggable插件3.设置一个div并设置样式并用Draggable包裹起来4.设置拖拽的范围5.Draggable常用props1.下载Draggable插件
npm install react-draggable2.引入Draggable插件
// 引入拖拽插件
import Draggable from react-draggable;3.设置一个div并设置样式并用Draggable包裹起来
import ./index.css
// 引入拖拽插件
import Draggable from react-draggable;
export default function IndexPage() {return (div{/* 给他设置一个父级 */}div classNamefuDraggable div classNametop这是上面的页面/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 (divdiv classNamefuDraggable bounds{{right: 500, left: 0,top:0,bottom:200} } div classNametop这是上面的页面/div/Draggable/div/div);
}
这样就是只能在父级div中进行拖拽 或者可以写成
import ./index.css
// 引入拖拽插件
import Draggable from react-draggable;
export default function IndexPage() {return (divdiv classNamefuDraggable bounds{.fu} div classNametop这是上面的页面/div/Draggable/div/div);
}5.Draggable常用props
allowAnyClick: boolean // 默认false设为true非左键可实现点击拖拽
axis: string // xx轴方向拖拽、yy轴方向拖拽、none禁止拖拽
bounds: { left: number, top: number, right: number, bottom: number } | string // 限定移动的边界接受值//1parent:在移动元素的offsetParent范围内//2一个选择器在指定的Dom节点内//3{ left: number, top: number, right: number, bottom: number }对象限定每个方向可以移动的距离
cancel制定给一个选择器组织drag初始化例如.body
defaultClassNamestring // 拖拽ui类名默认react-draggable
drfaultClassNameDraggingstring // 正在拖拽ui类名默认eact-draggable-dragging
defaultClassNameDraggedstring //拖拽后的类名默认react-draggable-dragged
defaultPosition{ x: number, y: number } // 起始x和y的位置
disabledboolean // true禁止拖拽任何元素
grid[number, number] // 正在拖拽的网格范围
handlestring // 初始拖拽的的选择器.handle
offsetParentHTMLElement // 拖拽的offsetParent
onMouseDown: (e: MouseEvent) void // 鼠标按下的回调
onStart: DraggableEventHandler // 开始拖拽的回调
onDragDraggableEventHandler // 拖拽时的回调
onStopDraggableEventHandler // 拖拽结束的回调
position: {x: number, y: number} // 控制元素的位置
positionOffset: {x: number | string, y: number | string} // 相对于起始位置的偏移
scalenumber // 定义拖拽元素的缩放
