Building a Drag and Drop Interface with React Hooks
Drag and Drop Interface feature is a simple React application that demonstrates the drag-and-drop functionality between two boxes. The boxes represent containers and items within them can be dragged and dropped from one box to another.
This interactive and user-friendly feature is commonly used in various web applications for tasks like organizing lists, sorting elements, or managing content.
Output Preview: Let us have a look at how the final feature will look like.
Approach to create Drag and Drop Interface
We have two box and we are using useState hook to store the current state data of the box. Items are defined as a draggable and this items can be dragged from one box to another box through by using onDragStart, onDragOver and onDrop events. The main functionalities include:
- Dragging items from one box to another.
- Preventing the addition of duplicate items in the same box.
- Dynamically updating the state to reflect changes in each box.
Steps to Create Drag and Drop Feature using React Hooks
Step 1: Create a React application using the following command:
npx create-react-app gfg
Step 2: After creating your project folder(i.e. gfg), move to it by using the following command:
cd gfg
Step 3: Write the code mentioned in the example in App.js and App.css file respectively
Example: This below example demonstrate the Drag and Drop Interface with React Hooks
Javascript
//File path: src/App.js import React, { useState } from 'react' ; import './App.css' ; const App = () => { // State for items in Box 1 const [box1Items, setBox1Items] = useState([ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' }, { id: 4, text: 'Item 4' }, { id: 5, text: 'Item 5' } ]); // State for items in Box 2 const [box2Items, setBox2Items] = useState([]); // Function to handle the start of a drag operation const handleDragStart = (e, item) => { // Set the data being dragged as // text/plain with the serialized item e.dataTransfer .setData( 'text/plain' , JSON.stringify(item)); }; // Function to handle the drag over event const handleDragOver = (e) => { // Prevent the default behavior to allow dropping e.preventDefault(); }; // Function to handle the drop event const handleDrop = (e, targetBox) => { // Prevent the default behavior // to avoid unwanted behavior e.preventDefault(); // Parse the dropped item from the dataTransfer const droppedItem = JSON.parse( e.dataTransfer .getData( 'text/plain' ) ); // Check the target box and // update the state accordingly if (targetBox === 'box1' ) { // Check if the same item is already present in Box 1 let isSameItemPresent = box1Items.some( item => item.id === droppedItem.id && item.text === droppedItem.text ); // Update the state of Box 1 // and remove the item from Box 2 setBox1Items((prevItems) => //If the same item is already present in Box 1 then //again don't add that item // else add the new item in Box 1 isSameItemPresent ? [...prevItems] : [...prevItems, droppedItem] ); setBox2Items((prevItems) => //Remove the dragged item from Box 2 prevItems.filter( (item) => item.id !== droppedItem.id ) ); } else if (targetBox === 'box2 ') { // Check if the same item is already present in Box 2 let isSameItemPresent = box2Items.some( item => item.id === droppedItem.id && item.text === droppedItem.text ); // Update the state of Box 2 and remove the item from Box 1 setBox2Items((prevItems) => //If the same item is already // present in Box 2 then //again don' t add that item // else add the new item in Box 2 isSameItemPresent ? [...prevItems] : [...prevItems, droppedItem] ); setBox1Items((prevItems) => //Remove the dragged item from Box 1 prevItems.filter( (item) => item.id !== droppedItem.id ) ); } }; return ( <> <h1> Drag and Drop Example | w3wiki </h1> <div className= "container" > <div className= "box" onDragOver={(e) => handleDragOver(e)} onDrop={(e) => handleDrop(e, 'box1' )}> <h3>Box 1</h3> <ul> {box1Items.map((item) => ( <li key={item.id} draggable onDragStart={ (e) => handleDragStart(e, item) }> {item.text} </li> ))} </ul> </div> <div className= "box" onDragOver={(e) => handleDragOver(e)} onDrop={(e) => handleDrop(e, 'box2' )}> <h3>Box 2</h3> <ul> { box2Items.map((item) => ( <li key={item.id} draggable onDragStart={ (e) => handleDragStart(e, item) }> {item.text} </li> )) } </ul> </div> </div> </> ); }; export default App; |
CSS
/* App.css */ /* Styling for container */ .container { display : flex; justify- content : center ; } /* Styling for heading */ h 1 { text-align : center ; color : green ; } /* Styling for Boxes */ .box { border : 2px solid #333 ; padding : 10px ; margin : 10px ; width : 250px ; height : 300px ; } /* Styling for List Items */ ul { list-style-type : none ; padding : 0 ; } li { background-color : #f0f0f0 ; border : 1px solid #ccc ; padding : 8px ; margin : 5px ; cursor : pointer ; } li:hover { background-color : #e0e0e0 ; } |
To run the application use the following command:
npm run start
Output: Now go to http://localhost:3000 in your browser:
Contact Us