前端拖拽库方案之react-beautiful-dnd

news2024/11/22 13:46:20

近期,知名 React 拖拽库 react-beautiful-dnd 宣布了项目弃用的决定,未来将不再维护。这一决定源于其存在的缺陷与局限性,促使作者转向开发一个更加现代化的拖拽解决方案——Pragmatic drag and drop(下面会介绍),其旨在提供更佳的性能、灵活性和可访问性。
在这里插入图片描述
作为 React 生态中不可或缺的工具库,react-beautiful-dnd 曾以其卓越的拖放体验赢得了广泛赞誉,其 npm 周下载量高达 163 万次。
在这里插入图片描述
对于仍希望继续使用 react-beautiful-dnd 的开发者,以下是一些可行的选择:

  • fork 与修补:可以fork react-beautiful-dnd 项目以继续使用它,或者利用patch-package进行定制修补。

  • 迁移至 fork 版本:考虑迁移到react-beautiful-dnd的某个活跃 fork 版本,以继续享受其功能。

  • 探索其他解决方案:考虑迁移到如 dnd-kit 等其他类似的拖拽解决方案。

  • 转向 Pragmatic drag and drop:为了获得更快速、更现代化的体验,可以手动迁移到Pragmatic drag and drop,或者利用官方提供的迁移包进行自动迁移。

下面来看看前端还有哪些好用的拖拽库。
在这里插入图片描述

Vue

VueDraggablePlus

VueDraggablePlus 是一个支持 Vue2 和 Vue3 的拖拽库,尤雨溪都在推荐:
在这里插入图片描述
Sortablejs 是一个非常流行的拖拽库,不过这个库的 Vue 3 版本已经三年没更新了,可以说是已经跟 Vue 3 严重脱节,所以就诞生了 VueDraggablePlus,这个组件就是基于 Sortablejs 实现的。
在这里插入图片描述
Github:https://github.com/Alfred-Skyblue/vue-draggable-plus

React

dnd-kit

dnd-kit 是一个专为 React 设计的现代化、轻量级、高性能且易于访问的拖拽解决方案,其 npm 周下载量 200 万左右。

import React, {useState} from 'react';
import {DndContext} from '@dnd-kit/core';
import {Draggable} from './Draggable';
import {Droppable} from './Droppable';

function Example() {
  const [parent, setParent] = useState(null);
  const draggable = (
    <Draggable id="draggable">
      Go ahead, drag me.
    </Draggable>
  );

  return (
    <DndContext onDragEnd={handleDragEnd}>
      {!parent ? draggable : null}
      <Droppable id="droppable">
        {parent === "droppable" ? draggable : 'Drop here'}
      </Droppable>
    </DndContext>
  );

  function handleDragEnd({over}) {
    setParent(over ? over.id : null);
  }
}

Github:https://github.com/clauderic/dnd-kit

react-dnd

react-dnd 是一个由 React 和 Redux 的核心作者 Dan Abramov 开发的强大的库,旨在帮助开发者轻松构建复杂的拖拽界面,其 npm 周下载量 200 万左右。

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

Github:https://github.com/react-dnd/react-dnd

通用

pragmatic-drag-and-drop

pragmatic-drag-and-drop 是 react-beautiful-dnd 作者开发的新拖拽库。它是一个较底层的拖拽工具链,它使得开发者能够安全且成功地利用浏览器内置的拖拽功能。这个工具链不依赖于特定的视图层,因此可以与 React、Svelte、Vue、Angular 等多种前端框架无缝集成。一些大型产品,如Jira、Confluence,都在使用 Pragmatic Drag and Drop 来实现拖拽功能。
在这里插入图片描述
Github:https://github.com/atlassian/pragmatic-drag-and-drop

Swapy

Swapy 是一个全新的拖拽库,仅发布三个月,就在 GitHub 上收获了 6k+ Stars,并且还在快速增长中。Swapy 与框架无关,只需几行代码就可以将任何布局转换为可拖动交换的布局。
在这里插入图片描述
Github:https://github.com/TahaSh/swapy

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2231275.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《高频电子线路》—— 调制

文章内容来源于【中国大学MOOC 华中科技大学通信&#xff08;高频&#xff09;电子线路精品公开课】&#xff0c;此篇文章仅作为笔记分享。 调制 调制的原因 第一个原因 是为了要做出切实可行的天线。 无线电波能够从天线发射出去&#xff0c;以及正常的接收&#xff0c;需要…

第二十四章 v-model原理及v-model简化表单类组件封装

目录 一、v-model 原理 二、表单类组件封装 三、v-model简化组件封装代码 一、v-model 原理 原理&#xff1a;v-model本质上是一个语法糖。例如应用在输入框上&#xff0c;就是 value属性 和 input事件 的合写。 作用&#xff1a;提供数据的双向绑定 ① 数据变&#x…

机器学习中的数据可视化:常用库、单变量图与多变量图绘制方法

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

SELS-SSL/TLS

一、了解公钥加密&#xff08;非对称加密&#xff09; 非对称加密中&#xff0c;用于加密数据的密钥与用于解密数据的密钥不同。私钥仅所有者知晓&#xff0c;而公钥则可自由分发。发送方使用接收方的公钥对数据进行加密&#xff0c;数据仅能使用相应的私钥进行解密。 你可以将…

Kubernetes中的secrets存储

华子目录 2.secrets2.1secrets功能介绍2.2secrets的创建2.2.1从文件创建2.2.2编写yaml文件 2.3secret的使用案例2.3.1将secret挂载到volume中2.3.2设置子目录映射secret密钥2.3.3将secret设置为环境变量2.3.4存储docker register的认证信息spec.imagePullSecrets[] 2.secrets …

软件设计师笔记-数据结构

数据结构 数据元素的集合及元素间的相互关系和构造方法。 线性表的存储结构 顺序存储链式存储 单链表节点 typedef struct node { int data; struct node *link; }NODE, *LinkList; 双向链表 每个节点有两个指针&#xff0c;分别指出直接前驱和直接后继。 循环链表 尾…

「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。 关键词 Canvas 组件动态绘制动画效果动态进度条旋转和缩放性能优化一、使用定时器实现动画循环 …

通俗易懂的理解递归 回溯 DFS

文章目录 递归概念递归例子1&#xff1a;递归打印链表递归例子2&#xff1a;求n数之和 回溯概念回溯例子1&#xff1a;组合问题 DFS概念DFS例子1&#xff1a;不同路径DFS例子2&#xff1a;岛屿数量总结 递归 概念 “方法自己调用自己&#xff0c;每一次调用都会更加接近递归的…

【AD】1-7 AD24软件扩展插件的设置与安装

1.如图所示打开扩展 2.点击齿轮后&#xff0c;确保离线安装位置关联了软件安装包的路径位置后&#xff0c;进行勾选选择后&#xff0c;点击应用即可安装。 注意&#xff1a;如果位置关联错误&#xff0c;则显示如图

Window on ARM解锁所有的TTS语音包供python调用

Window on ARM解锁所有的TTS语音包供python调用 可用的语音包查看查看TTS可用的语音包解锁语音包设置升级系统打开注册表导出注册表修改注册表导入新的注册表可用的语音包查看 微软的Windows 10操作系统为设备上安装的每种语言提供了一套语音。但只有部分已安装的语音能在整个…

pandas数据处理高级系列003---什么是交叉表(Cross Tabulation)以及pandas如何生成

做ab测试的时候遇到了一个新的知识点&#xff0c;交叉表以及如何用pandas生成交叉表 交叉表&#xff08;Cross Tabulation&#xff09;&#xff0c;也称为列联表&#xff08;Contingency Table&#xff09;&#xff0c;是一种用于统计分析的表格&#xff0c;用于显示两个或多个…

MySQL数据库之存储过程的创建与应用

存储过程 procedure 一.存储过程 作用&#xff1a;将经常使用的功能写成存储过程&#xff0c;方便后续重复使用。 二.创建存储过程 三.调用存储过程 call在计算机中是调用的意思 案例1&#xff1a;查看MySQL用户数 如上图所示&#xff0c;这是查看MySQL数据库中的user个数…

手搓简易shell

1.打印命令行 &#xff0c;接受命令行输入 命令行就是&#xff0c;“[用户名主机名 当前目录]$"获取这些信息都存储在Linux内核中的环境变量中&#xff0c;用getenv()函数取出 #include <stdio.h>2 #include <stdlib.h>3 #include <string.h>4 #include…

多个JDK版本之间的切换

首先电脑上可以同时安装多个版本的 JDK&#xff08;Java Development Kit),因为不同的应用程序可能需要不同 Java 版本的支持,安装多个 JDK 版本并不会导致冲突&#xff0c;只要设置好即可,在不同的情况下切换不同的jdk版本保证程序正常工作 很多程序jdk8 已经不支持,所以下载…

鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战 在鸿蒙生态下开发时&#xff0c;开发者可能会遇到多方面的挑战&#xff0c;这些挑战主要涉及开发工具、技术难度、生态竞争以及市场定位等方面。以下是对这些挑战的详细分析&#xff1a; 一、开发工具不完善 尽管鸿蒙系统的开发工具DevEco Studio在逐步完…

celery在django项目中实现并发任务和定时任务

创建一个django项目 django-admin startproject celeryDemo进入项目目录 cd celeryDemo在你的 Django 项目中&#xff0c;创建一个 celery_.py 文件&#xff0c;通常放在项目的根目录&#xff08;与 settings.py 同级&#xff09;&#xff1a; from __future__ import absol…

ST算法解RMQ问题

题目 代码 #include <bits/stdc.h> using namespace std; const int N 2e510, M 20; int st[N][M]; int n, m; int main() {ios::sync_with_stdio(0);cin.tie(0);cin >> n;for(int i 1; i < n; i)cin >> st[i][0];for(int i 1; (1 << i) < …

国内版Sketchfab平台 - CG美术之家(3D编辑发布篇)

CG美术之家为您提供了一个简便的模型上传流程&#xff0c;让发布您的3D模型变得轻而易举。只需准备好通用的3D模型格式&#xff0c;如OBJ、FBX或STL&#xff0c;您就可以轻松上传并分享您的创作。我们的平台支持在线3D渲染&#xff0c;您只需花费不到一分钟的时间&#xff0c;就…

Rocky Linux 9安装后无法远程ssh密码登录解决

在Rocky Linux 9版本中&#xff0c;为了增加安全性&#xff0c;默认情况下禁用SSH root密码登录。这是系统默认设定的规则&#xff0c;我们同样也可以更改它。   允许Rocky Linux 9 root用户通过ssh登录方法&#xff1a; 1.编辑SSH配置文件 2.找到以下内容 PermitRootLogin …