当前位置: 首页 > news >正文

前端拖拽库方案之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

相关文章:

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

近期&#xff0c;知名 React 拖拽库 react-beautiful-dnd 宣布了项目弃用的决定&#xff0c;未来将不再维护。这一决定源于其存在的缺陷与局限性&#xff0c;促使作者转向开发一个更加现代化的拖拽解决方案——Pragmatic drag and drop&#xff08;下面会介绍&#xff09;&…...

【题解】CF2033G

题目 CF2033G 分析 一道很显然是树形dp的题&#xff0c;但非常恶心QwQ。   先不管复杂度&#xff0c;找找递推关系&#xff0c;一种很直接的想法如下&#xff08;我觉得是错误的&#xff09;&#xff1a; d p [ i ] [ k ] m a x ( d p [ f a i ] [ k − 1 ] , d p [ s o …...

【error】 react 控制台报错Invalid hook call

目录 事件起因解决办法结束语 事件起因 我的前端react ant-design-pro项目能正常启动 但是网页这边就是一片空白&#xff0c;然后在浏览器的控制台报错&#xff1a; index.js:1 Warning: Invalid hook call. Hooks can only be called inside of the body of a function co…...

SDL基本使用

#include <stdio.h>#include <SDL.h>#undef main int main() {printf("Hello World!\n");SDL_Window *window NULL; // 声明窗口SDL_Init(SDL_INIT_VIDEO); // 初始化SDL// 创建SDL Windowwindow SDL_CreateWindow("Basic Window"…...

大模型的temperature参数

目录 模型的temperature参数 一、定义与作用 二、工作原理 三、举例说明 四、应用场景与调整策略 五、注意事项 模型的temperature参数 是人工智能领域中,特别是在生成式模型中使用的一个重要概念。它主要用于控制生成结果的多样性和随机性。以下是对该参数的详细解释和…...

软件项目功能复用指南,复用方案,评估方案(word原件)

6 复用原则 6.1 单一职责原则 SRP &#xff08;Single Responsibility Principle&#xff09; 6.2 开放封闭原则 OCP &#xff08;Open Closed Principle&#xff09; 6.3 Liskov 替换原则 LSP &#xff08;Liskov Subtitle Principle&#xff09; 6.4 接口隔离原则 ISP &a…...

leetcode 3255 长度为 K 的子数组的能量值 II 中等

给你一个长度为 n 的整数数组 nums 和一个正整数 k 。 一个数组的 能量值 定义为&#xff1a; 如果 所有 元素都是依次 连续 且 上升 的&#xff0c;那么能量值为 最大 的元素。否则为 -1 。 你需要求出 nums 中所有长度为 k 的 子数组 的能量值。 请你返回一个长度为 n …...

CCS下载安装(以12.3.0版本为例)

Code Composer Studio 是一个集成开发环境 (IDE)&#xff0c;简称CCS软件。支持 TI 的微控制器和嵌入式处理器产品的开发。Code Composer Studio 包含一整套用于开发和调试嵌入式应用程序的工具。 CCS9.3.0及以上版本不需要License文件&#xff0c;但是CCS旧版本比如CCS5.5.0需…...

C++STL容器详解——list

目录 一.list 1.list的介绍 2.为什么会有list? 二.list的常见接口 1.list的构造函数 2.list的遍历 3.迭代器类型 4.list的头插头删和尾插尾删 5.list任意位置的插入和删除 6.list的sort()及reverse() 7.迭代器失效 三.整体代码 一.list 1.list的介绍 list的文档说…...

linux tar 打包为多个文件

将目录打包成多个大小为 80MB 的文件&#xff0c;可以使用以下命令&#xff1a; tar -cf - my_folder | split -b 80m - my_folder.tar.解释&#xff1a; tar -cf - my_folder 将 my_folder 目录打包成一个 tar 文件并通过管道 (|) 输出到标准输出。 split -b 80m - my_fold…...

json字符串与python字典的区别与联系

json字符串与python中自带的字典类型外表长的很像&#xff0c;很容易区分不清楚&#xff0c;它们之间有着本质的区别&#xff0c;可以通过内置的json模块来互相转换。 文章目录 1、Python字典2、JSON数据格式3、JSON与python字典的区别4、JSON与python字典相互转换4.1 json字符…...

数据结构-链表【chapter1】【c语言版】

目录 1 链表的优势&#xff1a; 2 链表的组成: 3.一般使用结构体的形式来实现链表&#xff1a; 4.单向链表实现(创建&#xff0c;遍历&#xff0c;释放)&#xff1a; 4.1代码关键点备注&#xff1a; 5.查找节点&#xff1a; 5.1.按值查找节点 5.2.按位置查找节点 5.3 …...

OJ05:989. 数组形式的整数加法

目录 题目思路分析代码展示 题目 整数的 数组形式 num 是按照从左到右的顺序表示其数字的数组。 例如&#xff0c;对于 num 1321 &#xff0c;数组形式是 [1,3,2,1] 。 给定 num &#xff0c;整数的 数组形式 &#xff0c;和整数 k &#xff0c;返回 整数 num k 的 数组形…...

山东布谷科技:关于直播源码|语音源码|一对一直播源码提交App Store的流程及重构建议

自从YY、六间房开启国内聊天室和秀场等网红盛行的网络红利时代以来&#xff0c;紧随其后国内各大音视频平台相应出现&#xff0c;先有映客花椒等直播平台的风头正劲&#xff0c;后有功能板块更丰富的头条抖音Tiktok等&#xff0c;盈利功能点不仅仅有直播PK连麦等礼物打赏功能&a…...

docker搭建guacamole,web远程桌面

Apache Guacamole 是一个客户端无插件的远程桌面网关。它支持标准协议&#xff0c;如 VNC、RDP 和 SSH。您可以使用任何现代 web 浏览器连接到您的桌面环境&#xff0c;而无需安装额外的软件。使用 Docker Compose 部署 Guacamole&#xff0c;如果没有docker-compose请先执行su…...

.baxia勒索病毒来袭:数据恢复与防护措施详解

导言 在当今这个信息化高速发展的时代&#xff0c;数据已成为企业和个人的核心资产&#xff0c;其价值不可估量。然而&#xff0c;随着网络技术的不断进步&#xff0c;网络安全威胁也日益严峻&#xff0c;其中勒索病毒作为一种新型的网络攻击手段&#xff0c;尤其是.baxia勒索…...

[UUCTF 2022 新生赛]ezpop 详细题解(字符串逃逸)

知识点: php反序列化字符串逃逸 php反序列化魔术方法 构造pop链 变量引用 其实这一题还是比较简单的,只要看懂代码,并且理解为什么要用反序列化字符串逃逸,下面会详细解释 题目源码: <?php //flag in flag.php error_reporting(0); class UUCTF{public $name,$key,$…...

【Zynq UltraScale+ RFSoC】DFE

DFE : digital front-end 数字前端 Xilinx Zynq RFSoC DFE 是一款突破性的灵活应变无线电平台&#xff0c;可强化数字前端 &#xff08;DFE&#xff09;&#xff0c;用于 5G 大规模无线电部署和广泛的其他射频应用。 Zynq RFSoC DFE 基于唯一经过生产验证的自适应单芯片无线电…...

Ubuntu学习笔记 - Day3

文章目录 学习目标&#xff1a;学习内容&#xff1a;学习笔记&#xff1a;vim简介vim键盘图工作模式 vim移动光标操作上下左右移动翻页 vim替换和删除操作替换删除 vim插入模式详解进入模式搜索 vim底行模式操作保存退出行号 学习目标&#xff1a; 一周掌握 Linux基本使用技巧 …...

scala list系列

dd list:有序的&#xff0c;链表 1.建立 不可变列表 2.通过下标来访问&#xff1a;下标从0开始 3.不能修改 4.添加 5.删除 6.合并 7.查找&#xff0c;判断元素是否存在 8.遍历...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...