react-draggable的前端可拖动组件的使用

简介

react-draggable 是一个react中的可拖动组件库，它可以指定x，y轴的拖动，可以监听一系列拖动事件，例如拖动开始、拖动中和拖动结束等。react-draggable使用非常简单，只需要在组件上添加draggable属性，即可实现拖动功能。

安装

npm install react-draggable

用法

import Draggable from 'react-draggable';

const App = () => {
  return (
    <div>
      <Draggable>
        <div>可拖动元素</div>
      </Draggable>
    </div>
  );
};

export default App;

属性

属性	类型	默认值	说明
axis	string	'both'	指定拖动轴，可以是'x'、'y'或'both'
disabled	boolean	false	是否禁用拖动
grid	[number, number]	[1, 1]	拖动网格
handle	string	null	拖动句柄
onStart	function	null	拖动开始时触发的函数
onDrag	function	null	拖动中触发的函数
onStop	function	null	拖动结束时触发的函数

事件

事件	说明
dragStart	拖动开始时触发
drag	拖动中触发
dragStop	拖动结束时触发

示例

下面是一个可拖动组件的示例：

import Draggable from 'react-draggable';

const App = () => {
  return (
    <div>
      <Draggable axis="x">
        <div>左右拖动</div>
      </Draggable>
      <Draggable axis="y">
        <div>上下拖动</div>
      </Draggable>
    </div>
  );
};

export default App;

总结

react-draggable是一个非常强大的可拖动组件库，它可以帮助我们轻松地实现拖动功能。react-draggable的使用非常简单，只需要在组件上添加draggable属性，即可实现拖动功能。