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

近期,知名 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.mzph.cn/web/57591.shtml

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

相关文章

【深度学习】实验 — 动手实现 GPT【四】:代码实现Transformer、代码实现GPT模型、训练大型语言模型(LLM)

【深度学习】实验 — 动手实现 GPT【四】&#xff1a;代码实现Transformer、代码实现GPT模型、训练大型语言模型&#xff08;LLM&#xff09; 在 Transformer 块中连接注意力层和线性层代码实现Transformer 块 代码实现GPT模型文本生成训练模型计算训练集和验证集的损失 训练大…

我在命令行下剪辑视频

是的&#xff0c;你不需要格式工厂&#xff0c;你也不需要会声会影&#xff0c;更不需要爱剪辑这些莫名其妙的流氓软件&#xff0c;命令行下视频处理&#xff0c;包括剪辑&#xff0c;转码&#xff0c;提取&#xff0c;合成&#xff0c;缩放&#xff0c;字幕&#xff0c;特效等…

海外云手机是什么?对外贸电商有什么帮助?

在外贸电商领域&#xff0c;流量引流已成为卖家们关注的核心问题。越来越多的卖家开始利用海外云手机&#xff0c;通过TikTok等社交平台吸引流量&#xff0c;以推动商品在海外市场的销售。那么&#xff0c;海外云手机到底是什么&#xff1f;它又能为外贸电商卖家提供哪些支持呢…

MATLAB绘图|关于三维制图,给初学者的建议

给MATLAB的关于绘制三维图的建议 文章目录 基础知识使用基本函数设置轴标签和标题调整视角添加网格和图例绘制子图灵活使用 hold on 和 hold off保存图形总结 基础知识 了解三维坐标系统&#xff1a;三维图形有三个轴&#xff08;x、y、z&#xff09;&#xff0c;确保你理解如…

centos7配置keepalive+lvs

拓扑图 用户访问www.abc.com解析到10.4.7.8&#xff0c;防火墙做DNAT将访问10.4.7.8:80的请求转换到VIP 172.16.10.7:80&#xff0c;负载均衡器再将请求转发到后端web服务器。 实验环境 VIP&#xff1a;负载均衡服务器的虚拟ip地址 LB &#xff1a;负载均衡服务器 realserv…

opencv python笔记

OpenCV课程 OpenCV其实就是一堆C和C语言的源代码文件,这些源代码文件中实现了许多常用的计算机视觉算法。 OpenCV的全称是Open Source Computer Vision Library,是一个开放源代码的计算机视觉库OpenCV最初由英特尔公司发起并开发,以BSD许可证授权发行,可以在商业和研究领域中…

金融标准体系

目录 基本原则 标准体系结构图 标准明细表 金融标准体系下载地址 基本原则 需求引领、顶层设计。 坚持目标导向、问题导向、结果 导向有机统一&#xff0c;构建支撑适用、体系完善、科学合理的金融 标准体系。 全面系统、重点突出。 以金融业运用有效、保护有力、 管理高…

(实战)WebApi第10讲:Swagger配置、RESTful与路由重载

一、Swagger配置 1、导入SwashBuckle.AspNetCore包 2、在.NET Core 5框架里的startup.cs文件里配置swagger 3、在.NET Core 6框架里的Program.cs文件里配置swagger 二、RESTful风格&#xff1a;路由重载&#xff0c;HttpGet()括号中加参数 &#xff08;1&#xff09;原则&…

[java][基础]JSP

目标&#xff1a; 理解 JSP 及 JSP 原理 能在 JSP中使用 EL表达式 和 JSTL标签 理解 MVC模式 和 三层架构 能完成品牌数据的增删改查功能 1&#xff0c;JSP 概述 JSP&#xff08;全称&#xff1a;Java Server Pages&#xff09;&#xff1a;Java 服务端页面。是一种动态的…

数智税务 | 数电票:带来税务管理五大新挑战、绘就智慧税务征管新蓝图

目录 数电票&#xff0c;带来税务管理五大新挑战 1“集全” 2“管全” 3“算全” 4“备全” 5“控全” 数电票&#xff0c;绘就智慧税务征管新蓝图 1两化 2三端 3四融合 4变革征管方式 5优化征管流程 6提升征管效能 结语 数电票&#xff0c;带来税务管理五大新挑…

氢氧化铝改性打散机、分散机、包覆机、球磨机

表面改性是指在氢氧化铝颗粒表面吸附或包覆一层或多层物质&#xff0c;以改变其表面性质&#xff0c;增强其与基体材料的相容性和界面结合力。 表面改性方法主要分为物理法和化学法&#xff1a; 1.物理法&#xff1a;使用表面活性剂如高级脂肪酸、醇、胺、酯等进行表面包覆处…

【深度学习】Bert下载和使用(以bert-base-uncased为例)

【深度学习】Bert下载和使用&#xff08;以bert-base-uncased为例&#xff09; 代码报错报错原因解决方法解决步骤1.进入Hugging Face&#xff0c;检索bert-base-uncased2.点击Files and versions3.下载文件4.下载的文件放入文件夹5.代码修改 代码报错 bert BertModel.from_p…

JupyterLab,极其强大的下一代notebook!

JupyterLab简介 JupyterLab是Jupyter主打的最新数据科学生产工具&#xff0c;某种意义上&#xff0c;它的出现是为了取代Jupyter Notebook。不过不用担心Jupyter Notebook会消失&#xff0c;JupyterLab包含了Jupyter Notebook所有功能。 JupyterLab作为一种基于web的集成开发环…

MS01SF1 精准测距UWB模组助力露天采矿中的人车定位安全和作业效率提升

在当今矿业行业&#xff0c;随着全球对资源需求的不断增加和开采难度的逐步提升&#xff0c;传统的作业方式面临着越来越多的挑战。露天矿山开采&#xff0c;因其大规模的作业环境和复杂的地形特点&#xff0c;面临着作业人员的安全风险、设备调度的高难度以及资源利用率低下等…

使用 Github 进行项目管理

GitHub 是一个广泛使用的代码托管和协作平台&#xff0c;它提供了强大的工具来支持项目管理和团队协作。在项目开发和工作中&#xff0c;避免不了 Github 的使用&#xff0c;然鹅我一直没有稍微系统地学习过 github 的整个工作流程&#xff0c;对这些操作都是一知半解的&#x…

servlet开发

一、Servelet &#xff08;一&#xff09;Servelet概述 1.概念&#xff1a;Severlet是一门动态web资源开发技术。 2.本质&#xff1a;Severlet本质是一段Java程序&#xff0c;但和Java程序不同的是&#xff0c;Severlet程序无法独立运行&#xff0c;需要放服务器中&#xff…

ArcGIS003:ArcMap常用操作0-50例动图演示

摘要&#xff1a;本文以动图形式介绍了ArcMap软件的基本操作&#xff0c;包括快捷方式创建、管理许可服务、操作界面元素&#xff08;如内容列表、目录树、搜索窗口、工具箱、Python窗口、模型构建器窗口等&#xff09;的打开与关闭、位置调整及合并&#xff0c;设置默认工作目…

链表|反转链表|移除链表元素|链表的中间节点|返回倒数第k个节点|合并两个有序链表(C)

206. 反转链表 用两个指针 p1指向空&#xff0c;p2指向第一个节点 p2的next指向p1&#xff0c;把方向调过来 因为p2的next指向p1&#xff0c;会丢掉后面的节点&#xff0c;所以需要三个节点 前两个指针是为了反转&#xff0c;后一个指针是为了找到下一个节点 p2给给p1&a…

GitGraphPro 图管理系统

1.产品介绍 产品介绍方案 产品名称: GitGraphPro 图管理系统 主要功能: 智能图谱构建版本控制与协作数据分析与可视化自定义模板与导出功能介绍: 1. 智能图谱构建 具体作用:GitGraphPro 利用先进的算法,自动从项目数据

一:时序数据库-Influx应用

目录 0、版本号 1、登录页面 2、账号基本信息 3、数据库案例 4、可视化 5、java案例 0、版本号 InfluxDB v2.4.0 1、登录页面 http://127.0.0.1:8086/signin 账号&#xff1a;自己账号 密码&#xff1a;自己密码 2、账号基本信息 查看用户id和组织id&#xff01;&…