数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时装
法律如何在使用 React Beautiful DnD 的情况下在 React 中添加拖放功能
在本文中，我们将了解如何在列表中拖放元素。当你制作聊天、约会、信使或其他类似类型的网络应用时，拖放功能会非常有用。
示例
首先安装包 "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;
}输出
在执行时，它将产生以下输出 −
更新于：28-9-2021
885 次浏览
广告