在React中使用带有Beautiful DND的`useState`

npm install react-beautiful-dnd

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const [items, setItems] = useState([
  { id: 'item-1', content: 'Item 1' },
  { id: 'item-2', content: 'Item 2' },
  { id: 'item-3', content: 'Item 3' },
]);

const onDragEnd = (result) => {
  if (!result.destination) {
    return;
  }

  const startIndex = result.source.index;
  const endIndex = result.destination.index;

  const updatedItems = Array.from(items);
  const [removed] = updatedItems.splice(startIndex, 1);
  updatedItems.splice(endIndex, 0, removed);

  setItems(updatedItems);
};

<DragDropContext onDragEnd={onDragEnd}>
  <Droppable droppableId="items">
    {(provided) => (
      <ul {...provided.droppableProps} ref={provided.innerRef}>
        {items.map((item, index) => (
          <Draggable key={item.id} draggableId={item.id} index={index}>
            {(provided) => (
              <li
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                ref={provided.innerRef}
              >
                {item.content}
              </li>
            )}
          </Draggable>
        ))}
        {provided.placeholder}
      </ul>
    )}
  </Droppable>
</DragDropContext>