Недавно писал компонент для drag-and-drop и столкнулся с неочевидной ошибкой. Найдите проблему:import React, { useState, useRef } from 'react'; function DragDropList({ items: initialItems }) { const [items, setItems] = useState(initialItems); const dragItem = useRef(null); const dragOverItem = useRef(null); const handleDragStart = (e, index) => { dragItem.current = index; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', index.toString()); e.target.classList.add('dragging'); }; const handleDragOver = (e, index) => { e.preventDefault(); dragOverItem.current = index; e.dataTransfer.dropEffect = 'move'; }; const handleDrop = (e) => { e.preventDefault(); const draggedItemIndex = dragItem.current; const dropIndex = dragOverItem.current; if (draggedItemIndex === dropIndex) return; const newItems = [...items]; const draggedItem = newItems[draggedItemIndex]; // Удаляем элемент с его позиции newItems.splice(draggedItemIndex, 1); // Вставляем на новую позицию newItems.splice(dropIndex, 0, draggedItem); dragItem.current = null; dragOverItem.current = null; setItems(newItems); e.target.classList.remove('dragging'); }; return ( <ul className="drag-drop-list"> {items.map((item, index) => ( <li key={item.id} draggable="true" onDragStart={(e) => handleDragStart(e, index)} onDragOver={(e) => handleDragOver(e, index)} onDrop={handleDrop} onDragEnd={(e) => e.target.classList.remove('dragging')} > {item.name} </li> ))} </ul> ); } Пишите свои варианты в комментариях, а завтра опубликую правильный ответ. Подписывайся на @frontendino