Breaking News: Grepper is joining You.com. Read the official announcement!

drag and drop in react

Sleepy Head answered on February 3, 2024 Popularity 9/10 Helpfulness 4/10

answer drag and drop in react

related drag and drop in react js

drag and drop in react

Comment

//correct version of the below answer
import { useState } from "react";

const DragAndDrop = () => {
  const [tasks, setTasks] = useState([
    { id: 1, taskName: "Task 1" },
    { id: 2, taskName: "Task 2" },
    { id: 3, taskName: "Task 3" },
  ]);

  const [draggedItem, setDraggedItem] = useState(null);

  const handleDragStart = (e, id) => {
    e.dataTransfer.setData("id", id);
    setDraggedItem(id);
  };

  const handleDragOver = (e, id) => {
    e.preventDefault();
    const draggedOverItem = tasks.find(task => task.id === id);
    if (draggedItem === draggedOverItem) {
      return;
    }
    let items = tasks.filter(task => task.id !== draggedItem);
    let index = tasks.indexOf(draggedOverItem);
    items.splice(
      index,
      0,
      tasks.find(task => task.id === draggedItem),
    );
    setTasks(items);
  };

  const handleDragEnd = () => {
    setDraggedItem(null);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-2xl font-bold mb-4">Drag and Drop Example</h1>
      <div className="flex flex-col space-y-2">
        {tasks.map(task => (
          <div
            key={task.id}
            className="task bg-white shadow-md p-4 rounded-md transition-transform duration-500 ease-in-out"
            draggable
            onDragStart={e => handleDragStart(e, task.id)}
            onDragOver={e => handleDragOver(e, task.id)}
            onDragEnd={handleDragEnd}
          >
            <div>{task.taskName}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default DragAndDrop;

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: drag-and-drop javascript

Link to this answer
Share Copy Link

Contributed on Mar 06 2024

Sleepy Head

0 Answers Avg Quality 2/10

Closely Related Answers

drag and drop in react js

Comment

-1

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [tasks, setTasks] = useState([
    { id: 1, taskName: 'Task 1' },
    { id: 2, taskName: 'Task 2' },
    { id: 3, taskName: 'Task 3' }
  ]);

  const handleDragStart = (e, id) => {
    e.dataTransfer.setData('id', id);
  };

  const handleDrop = (e) => {
    const droppedItemId = e.dataTransfer.getData('id');
    const droppedItem = tasks.find(task => task.id === Number(droppedItemId));

    // Update tasks array to reflect the new order
    setTasks(prevTasks => {
      const updatedTasks = prevTasks.filter(task => task.id !== Number(droppedItemId));
      const index = tasks.indexOf(droppedItem);
      updatedTasks.splice(index, 0, droppedItem);
      return updatedTasks;
    });
  };

  return (
    <div className="App">
      <h1>Drag and Drop Example</h1>
      <div className="tasks-container">
        {tasks.map(task => (
          <div key={task.id} className="task" draggable onDragStart={(e) => handleDragStart(e, task.id)}>
            {task.taskName}
          </div>
        ))}
      </div>
      <div className="drop-zone" onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleDrop(e)}>
        Drop Here
      </div>
    </div>
  );
};

export default App;

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: drag-and-drop dr

Link to this answer
Share Copy Link

Contributed on Feb 03 2024

Amjad Saeed

0 Answers Avg Quality 2/10

drag and drop in react

Contents

More Related Answers

drag and drop in react

Closely Related Answers

drag and drop in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.