React中的拖拽功用完成：介绍react-beautiful-dnd及其运用进程

导言

在运用React构建Web运用程序时，拖拽功用是一项常见需求。为了方便完成拖拽功用，咱们能够借助第三方库react-beautiful-dnd。本文将介绍react-beautiful-dnd的基本概念，并结合实践的项目代码一步步具体介绍其运用进程。

什么是react-beautiful-dnd

react-beautiful-dnd是一个用于完成强壮而灵敏的拖拽功用的React库。它的规划思路是将拖拽功用分解为三个关键组件：DragDropContext、Droppable和Draggable。

1. DragDropContext（拖拽上下文）

DragDropContext是react-beautiful-dnd的核心组件之一，用于包裹整个拖拽区域。它负责管理拖拽的状况和交互，并经过事情处理函数将拖拽的成果传递给其他组件。

import { DragDropContext } from 'react-beautiful-dnd';
<DragDropContext onDragEnd={onDragEnd}>
  {/* ... */}
</DragDropContext>

在上面的代码中，DragDropContext组件经过onDragEnd特点指定了拖拽结束时的事情处理函数。

2. Droppable（可放置区域）

Droppable表明一个能够放置拖拽元素的区域。经过在Droppable组件上设置droppableId特点来仅有标识该区域。Droppable组件会将拖拽元素放置在其内部，并供给一些特点和回调函数供自界说。

import { Droppable } from 'react-beautiful-dnd';
<Droppable droppableId="sortable-list">
  {(provided) => (
    <ul
      className="sortable-list"
      {...provided.droppableProps}
      ref={provided.innerRef}
    >
      {/* ... */}
    </ul>
  )}
</Droppable>

在上面的代码中，咱们创建了一个Droppable组件，经过droppableId特点指定了可放置区域的标识符。在回来的回调函数中，咱们能够运用provided.droppableProps和provided.innerRef特点来供给给Droppable组件的容器元素。

3. Draggable（可拖拽元素）

Draggable表明一个可拖拽的元素。经过设置draggableId特点和index特点来仅有标识和排序拖拽元素。Draggable组件包裹在Droppable组件内部，根据用户的操作进行方位变化，并供给一些特点和回调函数供自界说。

import { Draggable } from 'react-beautiful-dnd';
const renderPageForm = (item, index) => {
  const id = index;
  return (
    <Draggable key={id} draggableId={String(index + 1)} index={index}>
      {(provided) => (
        <li
          className="drag-wrap"
          {...provided.draggableProps}
          ref={provided.innerRef}
        >
          {/* ... */}
        </li>
      )}
    </Draggable>
  );
};

在上面的代码中，咱们运用Draggable组件包裹了每个可拖拽元素。经过draggableId特点和index特点来仅有标识和排序元素。在回来的回调函数中，咱们能够运用provided.draggableProps和provided.innerRef特点来供给给Draggable组件的元素。

实践运用

下面咱们将结合实践的代码来一一具体介绍如何运用react-beautiful-dnd来完成拖拽功用。

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
// DragDropContext包裹拖拽区域
<DragDropContext onDragEnd={onDragEnd}>
  {/* Droppable组件表明可放置区域 */}
  <Droppable droppableId="sortable-list">
    {(provided) => (
      <ul
        className="sortable-list"
        {...provided.droppableProps}
        ref={provided.innerRef}
      >
        {pageList.map(renderPageForm)}
        {provided.placeholder}
      </ul>
    )}
  </Droppable>
</DragDropContext>

在上面的代码中，咱们经过DragDropContext组件将整个拖拽区域进行包裹，并设置了onDragEnd事情处理函数来处理拖拽成果。在DragDropContext组件内部，咱们运用Droppable组件来表明一个可放置区域，经过droppableId特点进行仅有标识。在回来Droppable组件的回调函数中，咱们构建了一个ul元素，经过provided.droppableProps和provided.innerRef特点来供给给Droppable组件的容器元素。

const renderPageForm = (item, index) => {
  const id = index;
  return (
    <Draggable key={id} draggableId={String(index + 1)} index={index}>
      {(provided) => (
        <li
          className="drag-wrap"
          {...provided.draggableProps}
          ref={provided.innerRef}
        >
          {/* ... */}
        </li>
      )}
    </Draggable>
  );
};

在上面的代码中，咱们界说了一个函数renderPageForm，用于烘托单个可拖拽元素。在该函数中，咱们运用Draggable组件来包裹每个可拖拽元素，并经过draggableId特点和index特点来仅有标识和排序元素。在回来Draggable组件的回调函数中，咱们构建了一个li元素，经过provided.draggableProps和provided.innerRef特点来供给给Draggable组件的元素。