React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Draggable拖拽功能

React Draggable插件如何实现拖拽功能

作者:zhaojiaxing123

这篇文章主要介绍了React Draggable插件如何实现拖拽功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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 // 定义拖拽元素的缩放

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文