526互联

2023-11-27 记录react拖拽组件——react-draggable试用方法

发布时间 2023-11-27 20:21:14作者: 哎呦你可棒棒了

安装：

yarn add react-draggable

注：如果你用npm安装失败可以尝试使用yarm，我就是npm i react-draggable报错了，用yarn装才好

普通使用：

// 引入
import Draggable from 'react-draggable';
const DraggableCore: any = Draggable;

// 使用
<div>
<DraggableCore>
    <div>666</div>
</DraggableCore>
</div>

注：一定要加div套住拖拽组件！

react+antd modal：

// 引入
import Draggable from 'react-draggable';
const DraggableCore: any = Draggable;

// modal
<Modal
  open={true}
  maskClosable={true}
  modalRender={(modal) => (
    <div>
      <DraggableCore handle='.ant-modal-header'>
        <div>{modal}</div>
      </DraggableCore>
    </div>
  )}
>
  <div>这是一个modal</div>
</Modal>

拖拽组件官方链接：https://github.com/react-grid-layout/react-draggable