Drag and Drop in ReactJS

Drag and drop functionality is a commonly used feature in modern web applications. It allows users to intuitively interact with elements on a webpage by dragging and dropping them to different locations.

While there are several libraries available that simplify the implementation of this feature, you can also create drag and drop functionality in React.js without relying on any external libraries. In this blog post, we will explore how to achieve this using React.js and its built-in event system.

Setting Up the Project

Before we dive into implementing the drag and drop feature, let’s set up a basic React.js project. You can use tools like Create React App to quickly scaffold a new project or create one manually.

Implementing Drag and Drop in ReactJS

Step 1

Create Components Create two components: DraggableItem and DroppableContainer. The DraggableItem component will represent the draggable element, while the DroppableContainer component will act as the container where draggable elements can be dropped.

import React from 'react';

class DraggableItem extends React.Component {
  handleDragStart = (event) => {
    const { id } = this.props;
    event.dataTransfer.setData('text/plain', id);
    event.currentTarget.classList.add('dragging');
  };

  handleDragEnd = (event) => {
    event.currentTarget.classList.remove('dragging');
  };

  render() {
    const { children } = this.props;
    return (
      <div
        className="draggable-item"
        draggable="true"
        onDragStart={this.handleDragStart}
        onDragEnd={this.handleDragEnd}
      >
        {children}
      </div>
    );
  }
}

class DroppableContainer extends React.Component {
  handleDragOver = (event) => {
    event.preventDefault();
  };

  handleDrop = (event) => {
    const droppedItemId = event.dataTransfer.getData('text/plain');
    // Perform any necessary logic with the dropped item
    console.log('Dropped item ID:', droppedItemId);
  };

  render() {
    const { children } = this.props;
    return (
      <div
        className="droppable-container"
        onDragOver={this.handleDragOver}
        onDrop={this.handleDrop}
      >
        {children}
      </div>
    );
  }
}

 

Step 2

Connect Components and Render In the main component, import the DraggableItem and DroppableContainer components. Render multiple instances of the DraggableItem component within the DroppableContainer component.

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <DroppableContainer>
          <DraggableItem id="item1">Item 1</DraggableItem>
          <DraggableItem id="item2">Item 2</DraggableItem>
          <DraggableItem id="item3">Item 3</DraggableItem>
        </DroppableContainer>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

 

Step 3

Style the Components Add CSS styles to the DraggableItem component to make it visually draggable. Customize the appearance of the DroppableContainer component to indicate the drop area.

.draggable-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f8f8f8;
  cursor: grab;
}

.draggable-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.droppable-container {
  border: 2px dashed #ccc;
  padding: 20px;
  min-height: 200px;
}

Step 4

Test the Drag and Drop Functionality Run the React development server and test the drag and drop functionality by dragging items from one container to another. Verify that the items are being dragged correctly and dropped items trigger the appropriate actions.

Conclusion

In this blog post, we delved into the process of implementing a drag and drop feature in a React.js application without relying on external libraries. Instead of using third-party solutions, we harnessed the power of React.js’s built-in event system to create a straightforward and custom drag and drop functionality.

The approach we explored here is suitable for scenarios where the drag and drop requirements are relatively simple. By understanding and utilizing the native events provided by React.js, we were able to seamlessly integrate this feature into our application.

It’s important to keep in mind that for more intricate and sophisticated drag and drop interactions, especially in larger or more complex projects, considering specialized drag and drop libraries may be beneficial. These libraries often come with additional features, optimizations, and cross-browser compatibility that can streamline development and enhance the user experience.

As always, the choice between a custom implementation and using external libraries depends on the specific needs and complexity of the project. Happy coding!