xxxxxxxxxx
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;
xxxxxxxxxx
//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;