初识React Beautiful DND组件—成为拖拽组件达人

2024-02-03 15:17:07

React Beautiful DND 拖拽组件库简介

React Beautiful DND是一个React.js组件库，可帮助您轻松创建美观、功能齐全的拖拽界面。它具有以下特点：

易于使用：React Beautiful DND提供了一系列开箱即用的组件，您可以轻松地将其拖放至您的React应用程序中。
高度可定制：您可以根据自己的需要自定义组件的外观和行为。
性能优异：React Beautiful DND是一款高性能组件库，即使在大型数据集上也能保持流畅的拖拽体验。
开源且免费：React Beautiful DND是一款开源且免费的组件库，您可以自由地将其用于任何个人或商业项目。

安装和使用

要使用React Beautiful DND，首先需要将其安装到您的项目中。您可以通过以下命令进行安装：

npm install react-beautiful-dnd

安装完成后，您就可以在您的React应用程序中使用React Beautiful DND组件了。以下是如何使用最简单的拖拽组件Draggable和Droppable的示例：

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

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

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

    const newItems = [...items];
    const [reorderedItem] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, reorderedItem);

    setItems(newItems);
  };

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

export default MyComponent;