如何使用 React Beautiful DnD 在 React 中添加拖放功能

react jsjavascript libraryfront end technology更新于 2025/11/17 9:48:17

在本文中，我们将了解如何在列表中拖放元素。拖放功能在开发聊天、约会、即时通讯或任何其他类似类型的 Web 应用时非常有用。

示例

首先安装软件包 "react-beautiful-dnd" −

npm i --save react-beautiful-dnd

此库将用于在列表中添加可拖放的元素。

在 App.js 中添加以下代码行 −

import { DragDropContext, Droppable, Draggable } from "reactbeautiful-dnd";
import React, { useState } from "react";
import "./App.css";

const finalSpaceCharacters = [
   {
      id: "gary",
      name: "Gary Goodspeed",
   },
   {
      id: "cato",
      name: "Little Cato",
   },
   {
      id: "kvn",
      name: "KVN",
   },
   {
      id: "mooncake",
      name: "Mooncake",
   },
   {
      id: "quinn",
      name: "Quinn Ergon",
   },
];

export default function App() {
   const [characters, updateCharacters] = useState(finalSpaceCharacters);
   function handleOnDragEnd(result) {
      if (!result.destination) return;

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

      updateCharacters(items);
   }
   return (
      <div className="App">
      <header className="App-header">
         <h1>Final Space Characters</h1>
         <DragDropContext onDragEnd={handleOnDragEnd}>
            <Droppable droppableId="characters">
            {(provided) => (
               <ul className="characters"{...provided.droppableProps}ref={provided.innerRef}>
               {characters.map(({ id, name }, index) => {
                  return (
                     <Draggable key={id} draggableId={id}index={index}>{(provided) => (<liref{provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}>
                        <div className="charactersthumb"></div>
                        <p>{name}</p>
                        </li>
                     )}
                     </Draggable>
                  );
               })}
               {provided.placeholder}
               </ul>
            )}
            </Droppable>
         </DragDropContext>
      </header>
   </div>
   );
}

这里我们将整个 <ul> 列表设置为可拖放(如果同时设置为可拖放和可拖动，则必须使用 "provided>)。

在可拖放的 <ul> 中，我们映射了整个字符列表，并创建了每个可拖动组件。在每个组件中，我们添加了包含所有数据的 <li>。我们在 <li> 上引用了每个可拖动组件。

接下来，在 App.css 中添加以下代码行，以创建网站的基本 CSS −

.characters {
   list-style: none;
   padding-left: 0;
}

.characters li {
   display: flex;
   align-items: center;
   border: solid 2px #d0d0d0;
   border-radius: .2em;
   padding: .5em .8em .5em .5em;
   margin-bottom: 1em;
}

.characters p {
   max-width: none;
   font-weight: bold;
   margin: 0;
}

.characters-thumb {
   overflow: hidden;
   flex-shrink: 0;
   width: 2em;
   height: 2em;
   background-color: #e8e8e8;
   padding: .5em;
   margin-right: .5em;
}
.characters-thumb img {
   display: block;
   width: 100%;
   height: auto;
}