react 配合 react-draggable 进行拖拽

 npm 地址

react-draggable - npm (npmjs.com)https://www.npmjs.com/package/react-draggable 这里呢是 配合antd中的Modal 模态框实现的 下面看代码：

<Draggable>
      <Modal
        centered
        footer={null}
        title={
          <div
            style={{
              width: '100%',
              cursor: 'move',
            }}
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false)
              }
            }}
            onMouseOut={() => {
              setDisabled(true)
            }}
            // fix eslintjsx-a11y/mouse-events-have-key-events
            // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
            onFocus={() => { }}
            onBlur={() => { }}
          // end
          >
            {loginState === 'register' ? '注册' : '登录'}
          </div>
        }
        visible={isVisible}
        onCancel={handleCancel}
        modalRender={(modal) => (
          <Draggable
            disabled={disabled}
            bounds={bounds}
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
      >
        {/* 登录 */}
        {loginState === 'default' ? defaultWrapperContent : null}
        {loginState === 'phone' ? phoneLogin() : undefined}
        {loginState === 'email' ? phoneLogin('email') : undefined}
        {loginState === 'register' ? phoneLogin('register') : undefined}
      </Modal>
    </Draggable>

这就是拖拽中的主要代码

最后实现的效果就是这样的  因为有粘贴样式  所以需要自己动手喽！

 

react-draggable使用

（1）安装react-draggable

$ npm install react-draggable --save

（2）引用

import Draggable from 'react-draggable'; 

（3）常用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 // 定义拖拽元素的缩放