npm 包 @rymarchikbot/react-beautiful-dnd 使用教程

简介

@rymarchikbot/react-beautiful-dnd 是一个 React 库，用于实现拖放（drag and drop）交互功能。通常用于前端应用程序中的图表、面板和列表等元素之间的移动和重新排列。

该库提供了一系列组件和钩子，可以完美支持许多不同用例，包括网格布局和纵横混合布局。

安装

@rymarchikbot/react-beautiful-dnd 主要通过 NPM 工具进行安装和管理，可以在项目目录下打开终端，使用以下命令安装：

--- ------- ---------------------------------

基本使用

拖放列表

下面是一个简单的拖放列表示例，我们将使用 <DragDropContext>、<Droppable> 和 <Draggable> 组件来创建我们的列表。

------ ------ - -------- - ---- --------
------ - ---------------- ---------- --------- - ---- ------------------------------------

----- ----------- - -
  ------ -
    --------- - --- --------- -------- ----- --- ---- --
    --------- - --- --------- -------- ---- ---------- --
    --------- - --- --------- -------- ------ ------ --
  --
  -------- -
    ----------- -
      --- -----------
      ------ --- ----
      -------- ---------- --------- ----------
    --
  --
--

----- --- - -- -- -
  ----- ------ -------- - ----------------------

  ----- ------------- - -------- -- -
    ----- - ------------ ------- ----------- - - -------

    -- -------------- -
      -------
    -

    -- -
      ----------------------- --- ------------------ --
      ----------------- --- ------------
    - -
      -------
    -

    ----- ----------- - ---------------------------------
    ----- --------- - --------------------------------------

    -- ------------ --- ---------- -
      ----- ---------- - --------------------------------
      ------------------------------- ---
      ------------------------------------ -- -------------

      ----- --------- - -
        ---------------
        -------- -----------
      --

      ----- ------- - -
        --------
        -------- -
          ----------------
          --------------- ----------
        --
      --

      -----------------
    - ---- -
      ----- ------------ - --------------------------------
      --------------------------------- ---
      ----- -------------- - -
        ---------------
        -------- -------------
      --

      ----- ---------- - ------------------------------
      ------------------------------------ -- -------------
      ----- ------------ - -
        -------------
        -------- -----------
      --

      ----- ------- - -
        --------
        -------- -
          ----------------
          -------------------- ---------------
          ------------------ -------------
        --
      --

      -----------------
    -
  --

  ------ -
    ---------------- --------------------------
      ----------------------------------------- -- -
        ---------- --------------- ------------------------
          ----------- -- -
            ----
              ----------------------------
              -----------------------
              -------- ----------- ------------ -------- -- ------- - --
            -
              -----------------------
              ---------------------------- ------ -- -
                ---------- ------------ -------------------- --------------
                  ----------- --------- -- -
                    ----
                      ----------------------------
                      -----------------------------
                      -----------------------
                      --------
                        ----------- -------
                        -------- ---
                        ------- -- - --- ---
                        ---------- -------
                        ---------------- ------------------- - ------------ - -------
                        ------ --------
                        ---------------------------------
                      --
                    -
                      ----------------------------
                    ------
                  --
                ------------
              ---
              ----------------------
            ------
          --
        ------------
      ---
    ------------------
  --
--

------ ------- ----

拖放网格

下面是一个拖放网格示例，我们将使用 <DragDropContext>、<Droppable>、<Draggable> 和 <Grid> 组件来创建我们的网格。

------ ------ - -------- - ---- --------
------ - ---------------- ---------- --------- - ---- ------------------------------------
------ ------ ---- --------------------

----- ----------- - -
  ------ -
    --------- - --- --------- -------- ----- --- ---- --
    --------- - --- --------- -------- ---- ---------- --
    --------- - --- --------- -------- ------ ------ --
  --
  -------- -
    ----------- -
      --- -----------
      ------ --- ----
      -------- ---------- --------- ----------
    --
  --
--

----- --- - -- -- -
  ----- ------ -------- - ----------------------

  ----- ------------- - -------- -- -
    ----- - ------------ ------- ----------- - - -------

    -- -------------- -
      -------
    -

    -- -
      ----------------------- --- ------------------ --
      ----------------- --- ------------
    - -
      -------
    -

    ----- ----------- - ---------------------------------
    ----- --------- - --------------------------------------

    -- ------------ --- ---------- -
      ----- ---------- - --------------------------------
      ------------------------------- ---
      ------------------------------------ -- -------------

      ----- --------- - -
        ---------------
        -------- -----------
      --

      ----- ------- - -
        --------
        -------- -
          ----------------
          --------------- ----------
        --
      --

      -----------------
    - ---- -
      ----- ------------ - --------------------------------
      --------------------------------- ---
      ----- -------------- - -
        ---------------
        -------- -------------
      --

      ----- ---------- - ------------------------------
      ------------------------------------ -- -------------
      ----- ------------ - -
        -------------
        -------- -----------
      --

      ----- ------- - -
        --------
        -------- -
          ----------------
          -------------------- ---------------
          ------------------ -------------
        --
      --

      -----------------
    -
  --

  ------ -
    ---------------- --------------------------
      ----------------------------------------- -- -
        ---------- --------------- ------------------------
          ----------- -- -
            --------------
              ----------------------------
              -----------------------
              -------- ----------- ------------ -------- -- ------- - --
            -
              -----------------------
              ------
                ---------------------------- ------ -- -
                  ---------- ------------ -------------------- --------------
                    ----------- --------- -- -
                      ---------
                        ----------------------------
                        -----------------------------
                        -----------------------
                        --------
                          ----------- -------
                          -------- ---
                          ------- -- - --- ---
                          ---------------- ------------------- - ------------ - -------
                          ------ --------
                          ---------------------------------
                        --
                      -
                        ----------------------------
                      -----------
                    --
                  ------------
                ---
              -------
              ----------------------
            ----------------
          --
        ------------
      ---
    ------------------
  --
--

----- ------------- - -----------
  -------- -----
  --------------- -------
  ------------ -------
--

----- ---- - -----------
  -------- -----
  --------- ----
  ---------------------- ---------------- ------------- ------
--

----- -------- - -----------
  ------- ------
--

------ ------- ----

高级使用

组件

<DragDropContext>

<DragDropContext> 组件是整个库的核心组件。它是所有操作的入口点，并将帮助我们实现拖放交互。

属性：

  • onBeforeCapture - 捕获之前的钩子函数。
  • onBeforeDragStart - 开始拖拽之前的钩子函数。
  • onDragStart - 开始拖拽时的钩子函数。
  • onDragUpdate - 拖拽更新时的钩子函数。
  • onDragEnd - 拖拽结束时的钩子函数。

<Droppable>

<Droppable> 组件是我们希望拖放元素落在其中的位置。可以将一个或多个 <Draggable> 组件内部放在 <Droppable> 组件中。

属性：

  • direction - 可以指定拖放方向（"horizontal" 或 "vertical"）。
  • droppableId - 指定 droppable 唯一标识符。
  • isCombineEnabled - 启用 combine 模式。
  • isDropDisabled - 禁用拖放。
  • mode - 指定模式（"standard"，"virtual" 或 "record"）。
  • getContainerForClone - 获取 clone 元素时的容器。
  • ignoreContainerClipping - 忽略容器的裁剪。
  • snapshot - 从 <Draggable> 组件获取快照。

<Draggable>

<Draggable> 组件是拖动的元素，通过将其内部包装在 <Droppable> 组件中来启用拖放。可以与其他 <Draggable> 组件、<Droppable> 组件一起使用。

属性：

  • draggableId - 指定 draggable 唯一标识符。
  • isDragDisabled - 禁用拖拽。
  • shouldRespectForcePress - 是否应该遵守 force press 行为。
  • index - 指定 draggable 的索引。
  • children - 将 props 传递下去的 React 组件。

<DroppableProvided>

当 <Droppable> 组件作为函数子组件时，它会传递一个 <DroppableProvided> 对象给组件。

属性：

  • innerRef - 在渲染节点上设置挂载 ref 的函数。
  • droppableProps - 传递给渲染节点的 props。
  • placeholder - 用于提供空间的占位符元素。

<DraggableProvided>

当 <Draggable> 组件作为函数子组件时，它会传递一个 <DraggableProvided> 对象给组件。

属性：

  • innerRef - 在渲染节点上设置挂载 ref 的函数。
  • draggableProps - 传递给渲染节点的 props。
  • dragHandleProps - 传递给拖动处理程序节点上的 props。

钩子函数

onDragStart

当拖动开始时调用，使用此钩子函数在状态上设置当前拖动状态。

----- --------------- - --------- -- -
  -- -- ------------
--

------ -
  ---------------- ------------------------------
    --- --- ---
  ------------------
--

onDragUpdate

当拖动更新时调用，使用此钩子函数在状态上更新当前拖动状态。

----- ---------------- - --------- -------- -- -
  -- -- ------------
--

------ -
  ---------------- --------------------------------
    --- --- ---
  ------------------
--

onDragEnd

当拖动结束时调用，使用此钩子函数更新应用程序状态。

----- ------------- - -------- -- -
  -- -- ------------
--

------ -
  ---------------- --------------------------
    --- --- ---
  ------------------
--

onBeforeCapture

当 dragging 状态成功捕获时调用，使用此钩子函数设置当前 drags 优先级等级。

----- ------------------- - ------ -- -
  -- -- ------------
--

------ -
  ---------------- --------------------------------------
    --- --- ---
  ------------------
--

onBeforeDragStart

当拖动未成功捕获前调用的钩子函数。

----- --------------------- - --------- -- -
  -- -- ------------
--

------ -
  ---------------- ------------------------------------------
    --- --- ---
  ------------------
--

总结

这篇文章主要介绍了如何使用 @rymarchikbot/react-beautiful-dnd 库来实现拖放交互功能。我们通过示例代码演示了如何使用库的组件和钩子来实现拖放列表和网格，并介绍了一些高级用法，例如自定义组件和钩子函数。

掌握这个库可以使我们更加轻松地实现拖放功能，在实际开发中应用广泛。希望这篇文章可以帮助大家更好地应用 @rymarchikbot/react-beautiful-dnd 库。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672693660cf7123b36740

阅读全文

猜你喜欢

  • npm 包 modulino 使用教程

    前言 在前端开发中，你经常会遇到需要编写可重用代码的情况，这时就可以用到 npm 包 modulino。modulino 是一种特殊的模块，可以被作为可执行文件执行和常规模块导入使用。

    4 年前
  • npm 包 c8y-ip.js 使用教程

    前言 在前端开发和系统管理领域，经常需要获取设备的 IP 地址。在 Node.js 生态系统中，有许多优秀的 Node.js 模块可以帮助我们获取设备的 IP 地址，例如 c8y-ip.js。

    4 年前
  • npm 包 auto-tag-plus 使用教程

    在现代前端开发中，经常会使用到 npm 包管理工具来完成各种需求。其中一个非常重要的功能是自动打标签并发布，这个需求对于团队合作来说非常有必要。在这篇文章中，我们介绍一款 npm 包 auto-tag...

    4 年前
  • npm 包 keycloak-authz 使用教程

    概述 在 Web 应用程序中实现基于角色的访问控制是一项重要的任务，而 keycloak-authz 这个 npm 包提供了用于 Keycloak 认证服务器的访问控制的客户端 API。

    4 年前
  • npm 包 v-viewer-fix 使用教程

    在现代 Web 开发领域中，图片展示功能已经越来越常见。但是，有时候我们需要更加强大、灵活的图片查看功能。这时候，使用 npm 包 v-viewer-fix 是一个不错的选择。

    4 年前
  • npm 包 gitbook-plugin-mind-maps 使用教程

    在前端领域中，常常需要通过各种技术手段来实现某种功能。而 npm 包则是比较常用的一种技术手段，好的 npm 包可以让我们的工作事半功倍。本篇文章介绍 npm 包 gitbook-plugin-min...

    4 年前
  • npm 包 cordova-plugin-openapp 使用教程

    前言 在移动应用开发过程中，我们时不时需要跳转到其他应用，如跳转到微信或支付宝进行支付服务。而在前端开发中，我们可以使用 cordova-plugin-openapp 这个 npm 包来实现应用之间的...

    4 年前
  • npm 包 cordova-plugin-version 使用教程

    Cordova 是一个流行的开发框架，可用于构建混合应用程序。cordova-plugin-version 是 Cordova 的一种插件，它可以帮助你获取和控制 Cordova 应用程序的版本号。

    4 年前
  • npm 包 node-dogandcat 使用教程

    简介 node-dogandcat 是一个基于 Node.js 的 npm 包，它提供了一组用于处理动物对象的工具函数，其中包括 Dog 和 Cat 两个类。通过这个包，开发者可以方便地创建、修改、查...

    4 年前
  • npm 包 undo-redo-manager 使用教程

    在前端开发中，实现撤销和重做功能是很常见的需求。此时我们可以使用一个 npm 包：undo-redo-manager。 undo-redo-manager 是一个用于管理撤销和重做操作的 JavaSc...

    4 年前
  • npm 包 kaze 使用教程

    前言 在前端开发中，我们经常会用到各种第三方库或工具，这些代码的管理、更新、下载等操作是非常费时费力的。好在有 npm 这个包管理工具，可以简化这个过程。 kaze 是一个优秀的 npm 包，它提供了...

    4 年前
  • npm 包 ember-fetch-service 使用教程

    在前端开发中，我们经常会使用到 fetch API 来发送 HTTP 请求获取数据，但是在使用过程中可能会遇到一些问题，例如请求失败处理、请求头设置、拦截器等。为了方便开发者在 Ember 框架下做这...

    4 年前
  • npm 包 yto-web-cli 使用教程

    前言 在开发前端项目时，我们常常需要使用一些第三方工具来帮助我们完成各种任务。其中，npm 包就是一个常用的资源库，可以满足多种开发需求。在本文中，我们将介绍一款名为 yto-web-cli 的 np...

    4 年前
  • npm 包 omi-snippets 使用教程

    什么是 omi-snippets omi-snippets 是一个前端开发的代码片段库，包含了 Omi 框架的常用代码片段。开发者可以快速地插入这些代码片段，提高开发效率，同时避免了繁琐的手写代码。

    4 年前
  • npm 包 sine-rest 使用教程

    引言 npm 是开发前端项目时最常用的包管理工具之一，通过使用现成的 npm 包，我们可以快速地构建出各种功能强大的项目。这篇文章介绍一个由 sine 来维护的 npm 包 sine-rest，它可以...

    4 年前
  • npm 包 datxweb 使用教程

    datxweb 是一个轻量级的 JavaScript 库，可以方便地将数据转换成 JSON 或 XML 格式，并且可以在浏览器和 Node.js 中使用。本文将详细介绍如何安装和使用 datxweb ...

    4 年前
  • npm 包 @firestitch/pane 使用教程

    简介 @firestitch/pane 是一款前端组件库中用于实现面板化 UI 界面的 npm 包。这个组件可用于设计和构建数据表格、表单等组件。它提供了一套完整的样式和交互方式，可以让你轻松地实现数...

    4 年前
  • npm 包 @ne_fe/boot 使用教程

    前言 在前端开发过程中，我们经常需要使用一些工具来提高开发效率，如打包工具、构建工具等。针对这些工具，我们可以使用一些优秀的 npm 包来加快开发速度。@ne_fe/boot 就是这样一个 npm 包...

    4 年前
  • npm 包 instascan-hu 使用教程

    在前端开发中，二维码识别技术是非常重要和实用的，而 instascan-hu 则是一款基于 instascan 可以用于浏览器端识别二维码的 npm 包。本文将为大家介绍如何使用 instascan-...

    4 年前
  • npm包 fastify-mongo-tickets 使用教程

    介绍 fastify-mongo-tickets 是一个基于node.js的npm包，提供了与MongoDB数据库连接的功能，以及对MongoDB数据库的操作支持。

    4 年前

相关推荐

    暂无文章