如何在 ReactJS 中使用 react-draggable 模块？

我们可以使用 ReactJS 中的react-draggable模块，用于使元素可拖动。在内部，可拖动项目在 CSS 变换的帮助下移动。该模块允许项目变得可拖动，而不管它们的当前位置。我们可以在 ReactJS 中使用以下方法来使用react-draggable模块。

方法：在下面的示例中，我们使用了react-draggable模块来演示如何在我们的 ReactJS 应用程序中使用它。我们已经从库中导入了 Draggable 组件并在我们的主 App 组件中使用它，现在无论此 Draggable 组件中存在什么内容，都可以用鼠标在屏幕上拖动它。就像在下面的示例中一样，我们有一个带有文本This line 的 div 现在可以移动！它是可拖动的，如下图所示。

可拖动道具：

• allowAnyClick：如果此值设置为 true，则用于允许拖动非左键单击。
• axis：用于确定可拖动对象可以在哪个轴上移动。
• bounds：用于表示运动边界。
• cancel：用来表示一个选择器，可以用来阻止拖拽初始化。
• defaultClassName：用于表示可拖动 UI 的类名。
• defaultClassNameDragging：用于表示拖拽动作的默认类名。
• defaultClassNameDragged：用于表示拖动动作的默认类名。
• defaultPosition：用于表示默认的 x 和 y 坐标应该开始拖动的位置。
• disabled：用于禁用组件。
• 网格：用于表示拖动应捕捉到的 x 和 y 坐标。
• 手柄：用于表示一个选择器，用作启动拖动的手柄。
• offsetParent：用于传递我们自己的offsetParent进行拖拽计算。
• onMouseDown：用户鼠标按下事件触发的回调函数。
• onStart：是拖动开始时触发的回调函数。
• onDrag：是拖动时触发的回调函数。
• onStop：是拖拽停止时触发的回调函数。
• nodeRef：用于将节点引用元素传递给底层组件。
• position：当用户想要直接控制元素时使用。它使项目受控。
• positionOffset：用于表示开始的位置偏移量。
• scale：用于表示进行拖动的画布的比例。

创建 React 应用程序并安装模块：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

• 第 3 步：创建 ReactJS 应用程序后，安装 必需的 模块使用以下命令：

  npm install react-draggable

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react';
import Draggable from 'react-draggable';
  
export default function App() {
  return (
    

      
React-Draggable Module
      

        
          
This line can be moved now!
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://www.npmjs.com/package/react-draggable