学习如何在ReactJs中实现拖放功能

HackerNews什么值得看
111 阅读3分钟

在这篇博客中，我们将学习如何在**ReactJS**中借助外部库实现拖放。然而，使用jQuery或标准的JavaScript实现它总是涉及大量的计算，这取决于如何执行。但在外部库的帮助下，实现起来就很容易，而且不费吹灰之力。

  • 前提条件
  • 用于在ReactJS中实现拖放的可用库列表
  • React-beautiful-dnd的实施步骤
  • 优点
  • 结论

先决条件。

考虑到你已经对ReactJS组件和npm库有了很好的理解和认识，请继续阅读本博客。

开始吧。

什么是拖放功能？

拖放功能允许用户选择一个对象或一段文字，将其移动到所需的位置，然后将其 "扔 "到该位置。

首先，让我们看看实现拖放功能的可用库列表。

下面是一些用于拖放功能的流行库的列表。

-react-dnd
-react-beautiful-dnd
-react-draggable
-sortablejs

在这篇博客中，我们将学习如何利用react-beautiful-dnd库在react中一步步实现拖放功能。

react-beautiful-dnd的实施步骤。

1.创建react项目。

首先，你必须创建一个新的react应用程序来实现拖放功能。打开你的终端，用CRA命令创建一个新的react应用程序。

npx create-react-app react-drag-and-drop-app

2.导入所需的库。

创建应用程序后，设置项目文件夹并导入所有需要的库。对于安装react-beautiful-dnd，请遵循以下命令。

npm i react-beautiful-dnd

3.react-beautiful-dnd组件。

在react-beautiful-dnd中，我们主要有三个主要组件。为了实现这个库，我们需要了解这些组件。

4.4.DragDropContext。

在顶层，你必须要实现这个组件。因此，你的整个实现将在DragDropContext父组件之下。让我们看看它的实现。

<DragDropContext onDragEnd={onDragEnd}>
<ListGrid>
{lists.map((listKey) => (
<DraggableElement
elements={elements[listKey]}
key={listKey}
prefix={listKey}
/>
))}
</ListGrid>
</DragDropContext>

这是演示项目的代码例子，你可以在博客的最后找到。在这里你可以看到我们在顶部实现了DraDropContext组件，在这里我们有在每次成功投放后触发的onDragEnd事件。它返回实现进一步逻辑所需的dropable Id。

聘请最好的ReactJS开发人员

5.Droppable。

该组件用于实现可拖放区域。每一个隶属于Droppable组件的可拖动组件都可以被放置在这个区域。

<Droppable droppableId={`${prefix}`}>
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{elements.map((item, index) => (
<ListItem key={item.id} item={item} index={index} />
))}
{provided.placeholder}
</div>
)}
</Droppable>

这就是Droppable组件的实现。在这里你可以看到我们有一个可拖放的组件。我们必须给droppable参数一个唯一的ID。这也是我们将在上一点中看到的onDragEnd事件中得到的ID。

6.6.Draggable。

该组件用于实现可拖动区域。Daragable标签有两个参数 draggable 和 index。draggableId只不过是唯一的ID，而index是可拖动组件的索引值。

这里我们有一个提供参数的回调函数，并将一个快照作为参数传递给回调函数返回中定义的组件。而定义在可拖动标签下的组件可以在可拖动区域被拖动。

<Draggable draggableId={item.id} index={index}>
{(provided, snapshot) => {
return (
<DragItem
ref={provided.innerRef}
snapshot={snapshot}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<CardHeader>{randomHeader}</CardHeader>
<span>Content</span>
<CardFooter>
<span>{item.content}</span>
</CardFooter>
</DragItem>
);
}}
</Draggable>

这就是一个可拖动组件的实现。这里的DragItem只不过是回调函数返回下的div，它被定义在可拖动组件下。

我们已经完成了 react-beautiful-dnd 的三个主要组件的设置。

优点。

  • react-beautiful-dnd的实现相当简单。
  • react-beautiful-dnd很容易定制。
  • 文档很好
  • 响应式的维护者
  • 它很容易使用
  • 它是高度可定制的

演示链接。

coma

结论

在这篇博客中，我们看到了什么是拖放功能，以及如何在第三方库的帮助下在ReactJS中实现拖放，我们还看到了可用于实现这一功能的不同库。之后，我们通过不同的步骤来实现其中一个名为react-beautiful-dnd的库。最后，我们看到了使用 react-beautiful-dnd 的优势。

谢谢你的阅读!如果你有任何问题，请随时评论。

avatar
文章
阅读
粉丝