React: How to implement drag and drop in React?

1import { useState } from "react";
2
3function DragDropList() {
4  const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
5  const [draggedItem, setDraggedItem] = useState<number | null>(null);
6
7  const handleDragStart = (index: number) => {
8    setDraggedItem(index);
9  };
10
11  const handleDragOver = (e: React.DragEvent, index: number) => {
12    e.preventDefault();
13    if (draggedItem === null) return;
14
15    const newItems = [...items];
16    const dragged = newItems.splice(draggedItem, 1)[0];
17    newItems.splice(index, 0, dragged);
18    setItems(newItems);
19    setDraggedItem(index);
20  };
21
22  const handleDragEnd = () => {
23    setDraggedItem(null);
24  };
25
26  return (
27    <ul>
28      {items.map((item, index) => (
29        <li
30          key={item}
31          draggable
32          onDragStart={() => handleDragStart(index)}
33          onDragOver={(e) => handleDragOver(e, index)}
34          onDragEnd={handleDragEnd}
35          style={{ opacity: draggedItem === index ? 0.5 : 1 }}
36        >
37          {item}
38        </li>
39      ))}
40    </ul>
41  );
42}

1import { DndContext, closestCenter, DragEndEvent } from "@dnd-kit/core";
2import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
3import { CSS } from "@dnd-kit/utilities";
4
5function SortableItem({ id, text }) {
6  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
7
8  const style = {
9    transform: CSS.Transform.toString(transform),
10    transition,
11  };
12
13  return (
14    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
15      {text}
16    </div>
17  );
18}
19
20function SortableList({ items }) {
21  const handleDragEnd = (event: DragEndEvent) => {
22    const { active, over } = event;
23    if (active.id !== over?.id) {
24      // Reorder logic
25    }
26  };
27
28  return (
29    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
30      <SortableContext items={items} strategy={verticalListSortingStrategy}>
31        {items.map(item => <SortableItem key={item.id} {...item} />)}
32      </SortableContext>
33    </DndContext>
34  );
35}