react-moveable轻松实现元素移动、缩放和旋转

react-moveable

react-moveable 是一个用于 React 的库。

它通常用于在 React 应用中实现可移动的元素，比如图像、组件等的拖放、缩放、旋转等交互功能。这个库可以帮助开发者轻松地为用户提供更加灵活和动态的界面交互体验。

安装

你可以通过 npm 或 yarn 安装 react-moveable：

npm install react-moveable

# 或者

yarn add react-moveable

注意react对应版本

"react": "^17.0.1",

"react-moveable": "^0.26.2",

基本用法

以下是一个简单的 react-moveable 示例，展示了如何创建一个可移动的元素：

import React, { useRef } from 'react';

import Moveable from 'react-moveable';



const App = () => {

  const targetRef = useRef();



  return (

    <div>

      <div ref={targetRef} style={{ width: '100px', height: '100px', backgroundColor: 'red' }}>

        Move me!

      </div>

      <Moveable

        target={targetRef}

        draggable={true}

      />

    </div>

  );

};



export default App;

属性

react-moveable 提供了许多属性来自定义可移动元素的行为和外观。以下是一些常用属性：

• target: 需要变为可移动的元素的引用。
• draggable: 设置为 true 时，元素可拖动。
• resizable: 设置为 true 时，元素可缩放。
• scalable: 设置为 true 时，元素可缩放。
• rotatable: 设置为 true 时，元素可旋转。
• boundingBox: 设置为 true 时，元素将被限制在其父容器内移动。
• onDrag: 拖动时的回调函数。
• onResize: 缩放时的回调函数。
• onScale: 缩放时的回调函数。（触发时机和onResize不同）
• onRotate: 旋转时的回调函数。

onResize和onScale的区别

onResize 和 onScale 在 react-moveable 中都与缩放操作有关，但它们的具体含义和触发时机有所不同。

onResize

onResize 是在用户通过拖动元素的边框来进行缩放时触发的事件。这种缩放通常是通过鼠标点击并拖动元素的右下角或侧边来实现的。onResize 事件会在缩放操作的开始、进行中和结束时分别触发对应的回调函数（onResizeStart、onResize 和 onResizeEnd）。

onScale

onScale 则是在用户通过捏合手势（如在触摸屏设备上用两个手指进行缩放）来进行缩放时触发的事件。onScale 事件会在缩放操作的进行中持续触发，每次缩放的比例变化都会触发一次 onScale 回调函数。

区别

• 触发方式：onResize 通常是通过鼠标操作触发的，而 onScale 则是通过触摸屏设备的捏合手势触发的。
• 使用场景：onResize 更适用于桌面端的缩放操作，而 onScale 则更适用于移动端的缩放操作。
• 触发时机：onResize 在缩放操作的开始、进行中和结束时都会触发对应的回调函数，而 onScale 只在缩放操作的进行中持续触发。

使用示例

以下是一个同时使用了 onResize 和 onScale 的示例：

import React, { useRef } from 'react';

import Moveable from 'react-moveable';



const App = () => {

  const targetRef = useRef();



  const handleResize = (event) => {

    console.log('Resizing', event);

  };



  const handleScale = (event) => {

    console.log('Scaling', event);

  };



  return (

    <div>

      <div ref={targetRef} style={{ width: '100px', height: '100px', backgroundColor: 'red' }}>

        Resize and Scale me!

      </div>

      <Moveable

        target={targetRef}

        resizable={true}

        scalable={true}

        onResize={handleResize}

        onScale={handleScale}

      />

    </div>

  );

};



export default App;

当用户通过拖动边框进行缩放时，handleResize 函数会被调用；当用户通过捏合手势进行缩放时，handleScale 函数会被调用。

实际应用场景：

一、图片编辑与布局

在图像编辑类应用中，react-moveable可以让用户自由地移动、调整图片的位置和大小。例如，在一个在线照片编辑工具中，用户可以通过拖动图片来调整其在画布上的位置，通过拉伸边框来改变图片的大小。这样的功能可以极大地提高用户的操作体验，让他们能够更加灵活地进行图片布局和编辑。

二、界面组件布局

对于复杂的用户界面设计，react-moveable可以帮助开发者实现可拖动的界面组件。比如，在一个管理后台系统中，管理员可能需要根据自己的需求调整各个模块的位置和大小。通过使用react-moveable，可以让这些模块变成可移动的组件，方便用户进行个性化的布局设置。

三、低代码图片编辑

在数据可视化项目中，react-moveable可以用于编辑可视化图表。用户可以拖动图表中的元素，如柱状图的柱子、折线图的节点等，来调整数据的展示方式。同时，也可以通过移动整个图表来改变其在页面中的位置，以便更好地与其他元素进行布局搭配。

moveable github

moveable Demo