1const DraggableList = ({ items }) => {
2    const [list, setList] = useState(items);
3    const [draggedItem, setDraggedItem] = useState(null);
4
5    const handleDragStart = (item) => setDraggedItem(item);
6
7    const handleDragOver = (e, targetItem) => {
8        e.preventDefault();
9        if (draggedItem?.id === targetItem.id) return;
10        
11        _______________________
12        _______________________
13        _______________________
14    };
15
16    return (
17        <ul className="space-y-2">
18            {list.map(item => (
19                <li
20                    key={item.id}
21                    draggable
22                    onDragStart={() => handleDragStart(item)}
23                    onDragOver={(e) => handleDragOver(e, item)}
24                    className="p-2 bg-gray-100 rounded cursor-move"
25                >
26                    {item.text}
27                </li>
28            ))}
29        </ul>
30    );
31};