EasyUI React 可拖放组件

在本文中，我们将学习如何使用 jQuery EasyUI 设计可拖动的小部件。 EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，从而为开发人员节省大量时间。该组件从标记或选择器创建一个可放置区域，我们可以在其中放置可拖动元素。

可掉落道具：

• 范围：此道具用于删除范围。
• disabled：此道具用于停止调整可放置区域的大小。

可丢弃事件：

• onDragEnter：当可拖动对象被拖入时触发分配的事件。
• onDragOver：当可拖动对象被拖过时触发分配的事件。
• onDragLeave：当可拖动对象被拖动离开时触发分配的事件。
• onDrop：当可拖动对象被放下时触发分配的事件。

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

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

npx create-react-app foldername

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

cd foldername

第 3 步：创建 ReactJS 应用程序后，使用以下语法导入 EasyUI 模块。

import { Droppable } from "rc-easyui";

项目结构：它看起来像这样。

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

Javascript

import React from 'react';
import { Draggable, Droppable } from 'rc-easyui';
   
class App extends React.Component {
  render() {
    return (
      

        
EasyUI React Draggable Component
        
          

            

              Geeksforgeeks
            
  
          
        
         this.setState({ isover: true })}
          onDragLeave={() => this.setState({ isover: false })}
          onDrop={() => this.setState({ dropped: true })}
        >
          

            
Drop here
  
          
        
      
    );
  }
}
   
export default App;

运行应用程序的步骤：使用以下命令运行应用程序。

npm start

输出：