使用dnd-kit react库，实现元素拖拽功能，每次拖拽所有可拖拽元素都会重新渲染，如果可以拖拽元素上千，会导致拖拽卡顿
5条回答 默认 最新
关注【相关推荐】
- 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：react 基于 dnd-kit 封装的拖拽排序组件
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报
分享
- 2025-03-30 10:51waterkid0的博客 SortableContext： 告诉dnd-kit，哪一个容器是可以被拖拽和放置的区域。DndContext ： 拖拽功能最外面的容器。： 绑定每个拖拽的盒子。
- 2024-06-24 21:54non_hana的博客 由于前阵子需要在开发 Picals 的时候，需要实现一些拖动排序的功能。虽然有原生的浏览器 dragger API，不过纯靠自己手写很难实现自己想要的效果，更多的是吃力不讨好。于是使用了这个库来实现，在这里记录一下踩的坑...
- 2024-11-09 11:11Acaibird.的博客 dnd-kit是一个现代化的拖拽库，基于React构建，具有高可定制性和高性能。它通过提供一组核心组件和钩子，允许开发者实现复杂的拖拽交互。
- 2023-09-27 17:33ATWLee的博客 推荐一个react拖拽排序的库，@dnd-kit。
- 2021-02-05 22:05功能打包：可自定义的碰撞检测算法，多个激活器，可拖动的覆盖图，拖动手柄，自动滚动，约束等等。 支持广泛的用例：垂直列表，水平列表，网格，多个容器，嵌套上下文，可变大小的列表和网格，转换后的项目，虚拟...
- 2025-10-12 00:09农芬焰的博客 你是否还在为React项目选择合适的拖拽库而烦恼？面对dnd-kit和React DnD这两个主流方案，不知道该如何取舍？本文将从架构设计、性能表现、开发体验和适用场景四个维度，为你深入剖析两者的核心差异，并提供清晰的...
- 2025-04-09 11:41szx的开发笔记的博客 active, over 这两个变量，分别代表当前拖拽的组件数据和被覆盖的组件数据，然后通过 @dnd-kit/sortable 提供的 arrayMove 方法得到排序后的组件列表，接着使用dispatch更新Redux中的数据，实现页面展示最新排序的...
- 2021-05-29 09:38react、react-dom、mobx、mobx-react、react-dnd 实现逻辑 数据结构设计 属性 类型 说明 id Number 组件id（根据规则自动生成） type String 组件类型 childrens Array 组件下面包含的子组件 // 数据示例如下： [ {...
- 2025-03-23 11:54web16888的博客 【代码】react dnd-kit drag-handle 拖拽排序手柄。
- 2024-11-13 14:30起来改bug的博客 dnd-kit拖拽排序、轻量
- 2025-07-02 14:23
antd table列宽拉宽合并列拖拽，@dnd-kit/core，@dnd-kit/modifiers，@dnd-kit/sortable，react-resizable，可动态拖拽列，可动态拉宽列在本次介绍中，我们将详细探讨如何利用antd Table组件实现列宽的动态调整与合并列的拖拽功能，以及如何通过集成@dnd-kit相关库实现列的动态拖拽和排序。此外，react-resizable库的使用也是实现列宽动态调整的关键... - 2024-07-18 11:36Acaibird.的博客 dnd-kit是一个现代化的拖拽库，基于React构建，具有高可定制性和高性能。它通过提供一组核心组件和钩子，允许开发者实现复杂的拖拽交互。
- 2023-10-31 16:31阿琰a_的博客 最近在项目上有个模块需要实现拖拽功能，选了很久的拖拽组件，最后选择了dnd-kit组件库，原因在于这个组件比较新，并且近期还在维护，还有相对应的学习文档可以查看。
- 2024-07-15 15:29DDOS防御的博客 在Vue 3中是首选的方式来访问DOM元素，因为它是响应式的，并且与Vue的组合式API紧密集成。如果你需要在组件的生命周期钩子中访问DOM元素，你可以在。是一个响应式且可重用的引用对象，它允许你访问Vue组件中的DOM...
- 2025-08-30 17:53任澄翊的博客 在现代桌面应用中，拖拽交互已成为提升用户体验的关键功能。...本文将深入解析Cherry Studio中基于dnd-kit库的拖拽实现，涵盖核心组件设计、高级功能实现以及最佳实践。 ## 核心架构设计 ### 拖拽组件层级...
- 2022-11-08 20:32滑动变滚动的蜗牛的博客 react 基于 dnd-kit 进一步封装的拖拽排序组件，作用：将其抽取成一个只需传入列表和对于的回调方法、使用更为简单的组件。
- 2023-11-22 10:44阿琰a_的博客 事件捕获用过都不行、寻找了很多办法无果，dnd-kit官方文档给出了Sensors传感器的概念，功能大概意思就是比如鼠标按下拖拽组件需要移动多少个像素才触发拖拽事件、或者是等待多少毫秒触发拖拽事件。例如我写的传感器...
- 2024-05-11 18:04淘人居士的博客 使用dnd-kit实现列表成员的鼠标拖拽排序。
- 2025-05-16 09:42女生也可以敲代码的博客 在使用 @dnd-kit 实现拖拽功能时，拖拽过程中组件变形的问题通常由样式冲突、父容器限制或拖拽状态管理不当引起。为解决这些问题，可以采取以下措施：首先，确保组件的样式不会与 @dnd-kit 动态添加的 transform ...
- 2024-03-01 13:10HaanLen的博客 } 拖拽组件 dnd-kit 官方文档：https://docs.dndkit.com/ GitHub地址：https://github.com/clauderic/dnd-kit @dnd-kit – 用于 React 的轻量级、模块化、高性能、可访问且可扩展的拖放工具包。 功能丰富：可定制的...
- 没有解决我的问题, 去提问
问题事件
系统已结题
4月27日
已采纳回答
4月19日-
创建了问题
4月13日