npm 包 react-beautiful-dnd-temparary-old-version 使用教程

在前端开发中，我们经常需要实现拖拽排序这类功能，react-beautiful-dnd 就是一个非常出色的 react 库，能够帮助我们实现优雅的拖拽排序。但是，在某些情况下，新版本的 react-beautiful-dnd 有兼容性问题，可能无法直接使用。此时，我们可以使用 react-beautiful-dnd-temparary-old-version 这个包来实现相同的功能。

本文将详细介绍 react-beautiful-dnd-temparary-old-version 的使用方法，并提供了示例代码，希望对大家有所帮助。

安装

首先，我们需要使用 npm 来安装 react-beautiful-dnd-temparary-old-version 包：

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

使用

接下来，我们就可以开始使用 react-beautiful-dnd-temparary-old-version 了。在你的组件中引入 react-beautiful-dnd-temparary-old-version：

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

DragDropContext

我们需要将整个拖放区域包括在 DragDropContext 组件中。例如：

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

其中，onDragEnd 是一个回调函数，当拖拽结束时会被调用，我们需要在该函数中处理拖拽数据。

Droppable

我们需要将可以接收拖拽元素的容器包含在 Droppable 组件中。例如：

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

其中，droppableId 是该容器的唯一标识符，在 onDragEnd 中会用到，我们需要确保每个 Droppable 的 droppableId 是唯一的。

getListStyle 是一个根据是否正在拖动来改变样式的函数，可以根据您的需求自行更改。

Draggable

我们需要将要拖拽的元素包含在 Draggable 组件中。例如：

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

其中，key 和 draggableId 分别是该元素的唯一标识符，index 是该元素在数组中的索引位置。

getItemStyle 是根据是否正在拖动来改变样式的函数，可以根据您的需求自行更改。

onDragEnd

onDragEnd 是一个回调函数，在拖拽结束时被调用，可以根据需要进行处理。例如：

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

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

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

这里我们调用了 reorder 函数，该函数可以帮助我们重新排列数组元素的位置。您可以根据您的需求自行实现该函数。

示例代码

以下是完整的示例代码，您可以参考它来实现您的拖拽排序功能：

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

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

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

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

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

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

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

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

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

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

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

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

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

结语

通过本文的介绍，相信大家已经能够了解 react-beautiful-dnd-temparary-old-version 的使用方法，并在项目中实现拖拽排序功能。希望这篇文章对您有所帮助！

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

阅读全文

猜你喜欢

  • npm 包 sd-photoswipe 使用教程

    在前端开发中，图片浏览器是一种常见的功能需求。Photoswipe 是一种非常流行的开源 JavaScript 图片浏览器库，它具有轻量化、高性能和可自定义等特点。

    3 年前
  • npm 包 test-npm-caetvic 使用教程

    介绍 npm 是互联网上最大的包管理器之一，提供了几乎所有语言和框架的模块。而 test-npm-caetvic 就是一个基于 Node.js 的 npm 包。它是一个用于测试数组中元素是否全部为数字...

    3 年前
  • npm 包 true-arity 使用教程

    在 JavaScript 中，函数的元数（arity）是指函数的参数个数。在某些情况下，我们需要确保函数的参数个数是确定的并且符合我们的预期。而 npm 包 true-arity 就提供了这样的功能。

    3 年前
  • NPM 包 wiremock-manager 使用教程

    在前端开发中，我们经常需要根据不同的环境来模拟数据。然而，手动编写 mock 数据十分麻烦且易错，因此我们可以借助 wiremock 工具来自动生成 mock 数据。

    3 年前
  • npm 包 google-map-react-py 使用教程

    google-map-react-py 是一个在 React 框架下使用 Google Maps API 的 npm 包。它可帮助开发者轻松添加交互式地图到他们的项目中。

    3 年前
  • npm 包 cool-runner 使用教程

    cool-runner 是一个轻量级的命令行工具，它可以帮助前端工程师简化日常工作流程，具有高度的可扩展性和自定义性。在这篇文章中，我们将学习如何使用 cool-runner。

    3 年前
  • npm 包 @mortonprod/react-product-up-component 的使用教程

    介绍 在前端开发中，我们常常需要在页面中展示产品信息，例如商品、服务等。为了方便地展示这些产品信息，我们可以使用组件库来快速构建页面，并且提高开发效率。其中，npm 包 @mortonprod/rea...

    3 年前
  • npm 包 cdm-webpack-node-externals 使用教程

    在前端开发中，webpack 作为一个打包工具被广泛使用，它能够将多个源文件打包成一个或多个输出文件，方便前端开发人员将项目资源整合、压缩、上传服务器等。 然而，在使用 webpack 进行打包时，会...

    3 年前
  • npm 包 ng2-http-plus 使用教程

    前言 在现代 Web 应用程序的开发中，前端和后端的数据通信是一个必不可少的过程。Angular 是目前最流行的前端框架之一，它的 HTTP 模块使得前端发送和接收数据成为了一件非常简单的事情。

    3 年前
  • npm 包 eslint-config-pidev 使用教程

    什么是 eslint-config-pidev eslint-config-pidev 是一个我们团队内部使用的 eslint 配置包，提供了一些在前端项目中常用的 eslint 配置规则，并对一些特...

    3 年前
  • npm 包 vuejs-svg-icon 使用教程

    简介 vuejs-svg-icon 是一个基于 SVG 的图标库，它提供了一种简单、快速、灵活地在 Vue.js 中使用图标的方式。借助这个包，我们可以轻松地在项目中使用常见的图标，同时也可以自定义自...

    3 年前
  • npm 包 liconjs 使用教程

    简介 Liconjs 是一个轻量级的 JavaScript/TypeScript 库，主要用于将 SVG 图标转换为可伸缩的图标。他支持多种图标样式和自定义颜色和大小，同时也兼容多个框架（如 Reac...

    3 年前
  • npm 包 ts-lib-starter-lite-demo 使用教程

    前言 ts-lib-starter-lite-demo 是针对 TypeScript 语言的一个快速生成 npm 包的模板项目。它经过了严格的测试和实践，旨在帮助前端开发者快速构建高质量的 npm 包...

    3 年前
  • npm 包 @andreaspizsa/eslint-config 使用教程

    在前端开发中，代码规范一直是个重要的话题，它决定了代码的可读性、可维护性和可扩展性。ESLint 是一个常用的代码检查工具，它可以帮助我们制定和检查代码规范。在使用 ESLint 的过程中，我们需要先...

    3 年前
  • npm 包 upem-sdk 使用教程

    在前端开发中，为了提高开发效率和组件复用性，社区中涌现出了许多优秀的 npm 包。upem-sdk 就是其中一款可以帮助我们快速集成用户参数配置、错误监控和性能监控功能的 npm 包。

    3 年前
  • npm 包 upnp-ts 使用教程

    UPnP（通用即插即用协议）是一种基于 IP 网络的协议，用于实现设备之间的无缝连接。UPnP 最早是由微软、英特尔等公司联合推出的，目的是为了方便用户在家庭网络环境中使用多媒体设备。

    3 年前
  • npm 包 pref-name-sort-list 使用教程

    前言 在前端开发中，我们经常需要对一组字符串进行排序操作，排序时需要按照字符串首字母进行排序。这种排序方式称为“按照前缀字母排序”。但是在实际开发中，并没有现成的函数可以直接使用。

    3 年前
  • npm 包 expandable-view 使用教程

    简介 在前端开发中，我们经常需要使用可折叠、可展开的视图来展示复杂的数据结构或者大量的内容。使用 expandable-view npm 包可以方便地实现这一功能。

    3 年前
  • npm 包 sparrow-zhuchaoyang 使用教程

    什么是 sparrow-zhuchaoyang？ sparrow-zhuchaoyang 是一款基于 Vue 框架的前端组件库，由前端开发者朱朝阳开发并发布在 npm 上。

    3 年前
  • npm 包 obigo-js-ui 使用教程

    介绍 obigo-js-ui 是一款基于 Vue.js 开发的 UI 组件，旨在提供前端开发者高效且易用的用户界面解决方案。该组件库的设计风格简洁、现代，适用于各种类型的 Web 应用程序。

    3 年前

相关推荐

    暂无文章