寻找支持多选拖拽、可同时拖动所有选中项的DnD组件
React 多选同步拖拽 DnD 解决方案
需求:实现拖拽操作时同步移动所有已选中元素,而非仅支持拖动单个选中项。
- 方案1:基于
react-beautiful-dnd二次开发
你不需要更换现有组件,只需要补充选中状态管理逻辑即可实现目标效果:- 单独维护全局状态存储已选中的条目 ID 集合,给选中条目添加对应样式标识
- 监听
onDragStart事件,若当前触发拖拽的条目属于已选中集合,将所有选中条目统一标记为待移动状态 - 拖拽结束触发
onDragEnd回调时,根据拖拽目标位置批量调整所有选中条目的排序,同步更新列表数据即可
该方案复用现有组件能力,改造成本最低,不需要引入额外依赖。
- 方案2:使用原生支持多选拖拽的第三方组件
目前主流的新一代 React 拖拽库都已经原生支持多选同步拖拽能力,开箱即可用:@dnd-kit全家桶:作为react-beautiful-dnd的官方推荐替代方案,性能表现更优,API 灵活度更高,官方直接提供了多选拖拽的完整实现模板,只需要配置选中状态参数即可直接实现你需要的效果react-sortablejs:基于 SortableJS 封装的 React 组件,只需要配置multiDrag: true同时传入选中条目集合,几行代码即可实现多选同步拖拽功能
内容的提问来源于stack exchange,提问作者Стас Рябцев
相关产品推荐
相关产品推荐

