首页手记 React-beautiful-dnd学习：初学者入门指南

React-beautiful-dnd学习：初学者入门指南

标签：

前端工具 React.JS

概述

React-beautiful-dnd学习可以帮助开发者轻松实现React应用程序中的拖拽交互功能，提升用户体验。本文将详细介绍React-beautiful-dnd的安装、初始化以及基本概念，并通过示例代码展示如何创建和处理拖拽列表。

React-beautiful-dnd简介

什么是React-beautiful-dnd

React-beautiful-dnd 是一个用于 React 应用程序中的拖拽功能的库。它提供了简单且易于使用的 API，使得在 React 中实现拖拽交互变得容易。React-beautiful-dnd 是一个开源项目，由 Atlassian 团队维护，支持最新的 React 版本，并且兼容多种浏览器。

为什么要学习React-beautiful-dnd

学习 React-beautiful-dnd 可以帮助你构建具有动态交互功能的应用程序，比如任务管理器、日程规划工具等。它不仅能提升用户体验，还能使你的应用程序更加直观和用户友好。此外，掌握拖拽功能，你可以在复杂的应用程序中实现更高级的用户交互操作。

安装和初始化

要使用 React-beautiful-dnd，首先需要通过 npm 安装它。在你的项目目录下运行以下命令：

npm install react-beautiful-dnd

安装完成后，你可以通过导入 React-beautiful-dnd 来在你的 React 组件中使用它：

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

以下是一个简单的初始化示例，展示了如何设置一个基本的拖拽环境：

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const items = [
    { id: '1', content: 'Item 1' },
    { id: '2', content: 'Item 2' },
    { id: '3', content: 'Item 3' }
  ];

  const onDragEnd = (result) => {
    // 处理拖拽结束的逻辑
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

基本概念和术语

Draggable和Droppable

在 React-beautiful-dnd 中，并不需要直接使用 DragSource 和 DropTarget 这两个术语。它们更多是来自 React 的 react-dnd 库中的概念。相反，React-beautiful-dnd 使用 Draggable 和 Droppable 组件来实现拖拽功能。

Draggable：Draggable 组件用于包裹可以被拖动的元素。每个 Draggable 组件都必须有一个唯一的 draggableId 属性。
Droppable：Droppable 组件用于定义一个可以接受拖动元素的区域。每个 Droppable 组件都必须有一个唯一的 droppableId 属性。

Droppable区域与Draggable元素

Droppable 组件定义了可以接受拖动元素的区域，而 Draggable 组件则定义了可以被拖动的元素。每个 Droppable 组件可以包含多个 Draggable 组件。当用户在 Draggable 元素上拖动时，如果释放该元素进入一个 Droppable 区域，则会触发相应的事件回调。

下面是一个简单的示例，展示了如何创建 Draggable 和 Droppable 组件：

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const items = [
    { id: '1', content: 'Item 1' },
    { id: '2', content: 'Item 2' },
    { id: '3', content: 'Item 3' }
  ];

  return (
    <DragDropContext onDragEnd={() => {}}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

创建简单的拖拽列表

设置Draggable组件

Draggable 组件用于定义可以被拖动的元素。每个 Draggable 组件都需要一个 draggableId 属性来唯一标识每个可拖动项。以下是一个简单的 Draggable 组件示例：

import React from 'react';
import { Draggable } from 'react-beautiful-dnd';

function DraggableItem({ id, content }) {
  return (
    <Draggable draggableId={id}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          {content}
        </div>
      )}
    </Draggable>
  );
}

export default DraggableItem;

设置Droppable组件

Droppable 组件用于定义可以接受拖动元素的区域。每个 Droppable 组件都需要一个 droppableId 属性来唯一标识每个可放置区域。以下是一个简单的 Droppable 组件示例：

import React from 'react';
import { Droppable } from 'react-beautiful-dnd';

function DroppableList({ id, children }) {
  return (
    <Droppable droppableId={id}>
      {(provided) => (
        <div ref={provided.innerRef} {...provided.droppableProps}>
          {children}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
}

export default DroppableList;

样式调整

为了让拖拽列表看起来更美观，你可以通过 CSS 来调整样式。以下是一个简单的 CSS 示例，并展示了如何将这些样式应用到组件中：

.draggable {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

.draggable:hover {
  background-color: #f1f1f1;
}

.droppable {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

import React from 'react';
import { Draggable } from 'react-beautiful-dnd';

function DraggableItem({ id, content }) {
  return (
    <Draggable draggableId={id}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          className="draggable"
        >
          {content}
        </div>
      )}
    </Draggable>
  );
}

export default DraggableItem;

处理拖拽状态变化

监听拖拽开始、结束和移动事件

在 React-beautiful-dnd 中，可以通过在 DragDropContext 组件中设置回调函数来监听拖拽的开始、结束和移动事件。以下是一个简单的示例，展示了如何监听这些事件：

import React from 'react';
import { DragDropContext } from 'react-beautiful-dnd';

function onDragStart(result) {
  console.log('Drag started:', result);
}

function onDragEnd(result) {
  console.log('Drag ended:', result);
}

function onDragUpdate(result) {
  console.log('Drag updated:', result);
}

function App() {
  return (
    <DragDropContext
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      onDragUpdate={onDragUpdate}
    >
      {/* Your draggable and droppable components */}
    </DragDropContext>
  );
}

export default App;

更新UI状态以响应拖拽变化

当拖拽操作发生时，通常需要更新组件的状态以反映当前的拖拽状态。以下是一个简单的示例，展示了如何更新状态以响应拖拽变化：

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const [items, setItems] = useState([
    { id: '1', content: 'Item 1' },
    { id: '2', content: 'Item 2' },
    { id: '3', content: 'Item 3' }
  ]);

  const onDragEnd = (result) => {
    if (!result.destination) return;

    const itemsCopy = [...items];
    const draggedItem = itemsCopy.splice(result.source.index, 1);
    itemsCopy.splice(result.destination.index, 0, draggedItem[0]);

    setItems(itemsCopy);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

高级功能介绍

使用Reorder API进行元素排序

React-beautiful-dnd 提供了一个 Reorder API，可以用来在拖拽过程中实时更新元素的顺序。以下是一个简单的示例，展示了如何使用 Reorder API：

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const [items, setItems] = useState([
    { id: '1', content: 'Item 1' },
    { id: '2', content: 'Item 2' },
    { id: '3', content: 'Item 3' }
  ]);

  const onDragEnd = (result) => {
    if (!result.destination) return;

    setItems((items) => {
      const itemsCopy = [...items];
      const draggedItem = itemsCopy.splice(result.source.index, 1);
      itemsCopy.splice(result.destination.index, 0, draggedItem[0]);

      return itemsCopy;
    });
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

实现拖拽反馈效果

React-beautiful-dnd 提供了多种方法来实现拖拽反馈效果，比如显示拖拽提示和使用过渡效果。以下是一个简单的示例，展示了如何实现拖拽反馈效果：

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const items = [
    { id: '1', content: 'Item 1' },
    { id: '2', content: 'Item 2' },
    { id: '3', content: 'Item 3' }
  ];

  const onDragEnd = (result) => {
    console.log('Drag ended:', result);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: 'none',
                      backgroundColor: provided.isDragging ? '#f1f1f1' : '#fff'
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

处理多个Droppable区域

在某些情况下，你可能需要处理多个 Droppable 区域。以下是一个简单的示例，展示了如何处理多个 Droppable 区域：

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  const [items, setItems] = useState([
    { id: '1', content: 'Item 1' },
    { id: '2', content: 'Item 2' },
    { id: '3', content: 'Item 3' }
  ]);

  const onDragEnd = (result) => {
    if (!result.destination) return;

    setItems((items) => {
      const itemsCopy = [...items];
      const draggedItem = itemsCopy.splice(result.source.index, 1);
      itemsCopy.splice(result.destination.index, 0, draggedItem[0]);

      return itemsCopy;
    });
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
        <div>
          <h2>Area 1</h2>
          <Droppable droppableId="area1">
            {(provided) => (
              <div ref={provided.innerRef} {...provided.droppableProps}>
                {items.map((item, index) => (
                  <Draggable key={item.id} draggableId={item.id} index={index}>
                    {(provided) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        {item.content}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </div>
        <div>
          <h2>Area 2</h2>
          <Droppable droppableId="area2">
            {(provided) => (
              <div ref={provided.innerRef} {...provided.droppableProps}>
                {items.map((item, index) => (
                  <Draggable key={item.id} draggableId={item.id} index={index}>
                    {(provided) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        {item.content}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </div>
      </div>
    </DragDropContext>
  );
}

export default App;

实战案例：构建一个简单的任务管理器

项目结构

一个简单的任务管理器项目可能包含以下几个部分：

App.js：主应用文件，包含拖拽逻辑和状态管理。
Task.js：任务组件，展示单个任务。
styles.css：样式文件，用于美化界面。

主要功能实现

任务组件（Task.js）

任务组件用于渲染每个单独的任务。它包含以下属性：

id：任务的唯一标识符。
content：任务的内容。
onDelete：删除任务的回调函数。

import React from 'react';

function Task({ id, content, onDelete }) {
  return (
    <div className="task">
      <div className="task-content">{content}</div>
      <button onClick={() => onDelete(id)}>Delete</button>
    </div>
  );
}

export default Task;

主应用组件（App.js）

主应用组件负责处理拖拽逻辑和状态管理。它包含以下主要逻辑：

初始化任务列表。
监听拖拽事件，并更新任务列表。
提供删除任务的功能。

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import Task from './Task';

function App() {
  const [tasks, setTasks] = useState([
    { id: '1', content: 'Task 1' },
    { id: '2', content: 'Task 2' },
    { id: '3', content: 'Task 3' }
  ]);

  const onDragEnd = (result) => {
    if (!result.destination) return;

    setTasks((items) => {
      const itemsCopy = [...items];
      const draggedItem = itemsCopy.splice(result.source.index, 1);
      itemsCopy.splice(result.destination.index, 0, draggedItem[0]);

      return itemsCopy;
    });
  };

  const deleteTask = (id) => {
    setTasks((items) => items.filter((item) => item.id !== id));
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="tasks">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {tasks.map((task, index) => (
              <Draggable key={task.id} draggableId={task.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: 'none',
                      backgroundColor: provided.isDragging ? '#f1f1f1' : '#fff'
                    }}
                  >
                    <Task id={task.id} content={task.content} onDelete={deleteTask} />
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

代码优化与调试

代码优化

在实际应用中，你可能还需要处理更复杂的状态管理逻辑，例如持久化任务列表。你可以使用 Redux 或其他状态管理库来管理任务状态。

调试技巧

使用浏览器的开发者工具来调试拖拽事件的行为。
在 onDragStart、onDragEnd 和 onDragUpdate 回调函数中添加调试信息，以便更好地理解拖拽事件的触发顺序。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

12345678_0001

学生

手记
篇

粉丝

13

获赞与收藏

47

关注作者，订阅最新文章

相关文章推荐

React-Native学习指南

React JS和React-Native新手学习指南

react拖曳组件react-dnd的简单封装使用

Joomla别名的初学者指南

Web前端入门指南四（终章）

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空