如何在 React 中使用 HTML 拖放 API
在本教程中，我们将使用 HTML 拖放 API 在 React 中创建一个可重新排序的列表。这种功能可以用于多种用途，例如待办事项列表、投票或测验。
由于 HTML 拖放 API 已内置于浏览器中，因此无需额外的框架，从而保持了代码的轻量级。以下是我们即将构建的功能的演示：
让我们首先使用 Create React App 创建一个新项目：
npx create-react-app drag-n-drop
在本教程中，我们将修改现有App.js组件而不是创建新组件。我们将使用useStateHook 来保存列表项的顺序，因此我们需要导入 Hook、React 本身以及 CSS：
import React, { useState } from "react";
import "./App.css";
const App = () => {
};
export default App;
首先，在App函数内部，我们将声明状态变量：
const [dragItem, setDragItem] = useState();
const [list, setList] = useState([
"The Call Of Ktulu",
"For Whom The Bell Tolls",
"The Day That Never Comes",
"The Memory Remains",
"Confusion",
"Moth Into Flame",
"The Outlaw Torn",
"No Leaf Clover",
"Halo on Fire",
]);
dragItem将用于存储正在拖动的项目，其中list包含一个数组，我们将把该数组输出到应用程序中，并且我们可以使用拖放功能重新排序该数组。
接下来，我们将添加处理事件的函数。这些函数都由 HTML 拖放 API 中的拖拽事件触发。稍后在 HTML 中设置事件时，我会更详细地讲解每个函数：
const handleDragStart = (index) => {
setDragItem(index);
};
const handleDragEnter = (e, index) => {
e.target.style.backgroundColor = "#336699";
const newList = [...list];
const item = newList[dragItem];
newList.splice(dragItem, 1);
newList.splice(index, 0, item);
setDragItem(index);
setList(newList);
};
const handleDragLeave = (e) => {
e.target.style.backgroundColor = "black";
};
const handleDrop = (e) => {
e.target.style.backgroundColor = "black";
};
该handleDragEnter函数完成了大部分工作。它先按原始顺序创建列表项的副本，然后再使用方法splice()将项插入到新位置并更新状态list。
<ul>最后，我们使用以下函数将列表项返回到列表中map()：
return (
<ul className="dnd">
{list &&
list.map((item, index) => (
<li
draggable
key={index}
onDragStart={() => handleDragStart(index)}
onDragEnter={(e) => handleDragEnter(e, index)}
onDragLeave={(e) => handleDragLeave(e)}
onDrop={(e) => handleDrop(e)}
onDragOver={(e) => e.preventDefault()}
>
{item}
</li>
))}
</ul>
);
draggable– 将列表项的 draggle 属性设置为 true。key– 帮助 React 识别已更改的列表项。onDragStart– 当用户开始拖动列表项时触发。onDragEnter– 当可拖动元素进入有效的放置目标时触发。onDragLeave– 当可拖动元素离开有效的放置目标时触发。onDrop– 当可拖动元素被放置在有效的放置目标上时触发。onDragOver– 防止列表项放置时出现残影。
要完成此项目，请将以下内容添加到App.css文件中：
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.dnd {
list-style: none;
width: 500px;
margin: auto;
}
.dnd li {
cursor: move;
background-color: black;
color: #fff;
padding: 10px;
margin-bottom: 1px;
transition: all 0.2s;
}
.dnd li:hover {
background-color: #003366!important;
}
除了背景颜色之外，cursor:move这些样式都是可选的，您可以根据自己的需求进行修改。背景颜色可以增强用户界面，而改变光标颜色则可以提供视觉提示，让用户知道哪些项目可以拖动。
本教程到此结束。现在你应该对如何将 HTML 拖放 API 集成到 React 应用程序中有了很好的了解。
文章来源：https://dev.to/michaelburrows/how-to-use-the-html-drag-and-drop-api-with-react-11bi