react-beautiful-dnd示例

React Beautiful DND是一个用于实现拖放功能的React库。它提供了易于使用和灵活的API，用于创建可拖放列表、表格和其他交互式组件。

以下是一个简单的使用React Beautiful DND库的示例：

首先，确保已经安装了React Beautiful DND库。可以使用npm或yarn来进行安装：

Bash

npm install react-beautiful-dnd

或者

Bash

yarn add react-beautiful-dnd

接下来，创建一个基本的拖放列表组件。

Jsx代码：

import React from "react";

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

const items = [

  { id: "item-1", content: "Item 1" },

  { id: "item-2", content: "Item 2" },

  { id: "item-3", content: "Item 3" },

];

const App = () => {

  const handleDragEnd = (result) => {

    // 处理拖放结束事件

    const { destination, source } = result;

    // 判断是否有有效的目标位置

    if (!destination) {

      return;

    }

    // 重新排序列表项

    const reorderedItems = Array.from(items);

    const [removed] = reorderedItems.splice(source.index, 1);

    reorderedItems.splice(destination.index, 0, removed);

    // 更新状态或执行其他操作

    console.log("Reordered Items:", reorderedItems);

  };

  return (

   

     

        {(provided) => (

         

            {items.map((item, index) => (

             

                {(provided) => (

                 

                    ref={provided.innerRef}

                    {...provided.draggableProps}

                    {...provided.dragHandleProps}

                  >

                    {item.content}

                 

                )}

             

            ))}

            {provided.placeholder}

         

        )}

     

   

  );

};

export default App;

上述示例创建了一个简单的拖放列表，包含了三个可拖动的项目。当拖放结束时，会触发handleDragEnd函数，可以在该函数中进行进一步的操作，例如更新状态或执行其他逻辑

这只是React Beautiful DND的一个基本示例，可以根据需要进行自定义和扩展。通过参考React Beautiful DND的文档和API，可以了解更多关于拖放列表、表格和其他交互式组件的用法和功能。