EasyUI React Droppable Component

In this article, we will learn how to design a draggable widget using jQuery EasyUI. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. The component creates a droppable area from the markup or selector where we can drop the draggable elements.

Droppable Props:

• scope: This prop is used for dropping scopes.
• disabled: This prop is used to stop resizing the droppable area.

Droppable Events:

• onDragEnter: The assigned event fires when the draggable object is dragged enter.
• onDragOver: The assigned event fires when the draggable object is dragged over.
• onDragLeave: The assigned event fires when the draggable object is dragged leave.
• onDrop: The assigned event fires when the draggable object is dropped over.

Creating React Application and Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, import the EasyUI modules using the following syntax.

import { Droppable } from "rc-easyui";

Project Structure: It will look like this.

App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

import React from 'react';
import { Draggable, Droppable } from 'rc-easyui';

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>EasyUI React Draggable Component</h2>
        <Draggable>
          <div style={{ width: '100px',
                        height: '25',
                        border: '2px solid #ccc',
                        background: 'green'
                      }}>
            <p style={{ textAlign: 'center',
                        fontsize: '24px' }}>
              Geeksforgeeks
            </p>

          </div>
        </Draggable>
        <Droppable
          onDragEnter={() => this.setState({ isover: true })}
          onDragLeave={() => this.setState({ isover: false })}
          onDrop={() => this.setState({ dropped: true })}
        >
          <div>
            <p style={{ textAlign: 'center' }}>Drop here</p>

          </div>
        </Droppable>
      </div>
    );
  }
}

export default App;

Step to run the application: Run the application using the following command.

npm start

Output: