【dnd-kit】react前端做一个可以垂直拖动的无序列表

首页/资讯中心/详情
发布时间：2026/7/4 5:00:45
【dnd-kit】react前端做一个可以垂直拖动的无序列表
背景和效果需要做一个垂直拖动的无序列表。因项目中其他模块已经使用了dnd-kit, 为保持一致使用的也是dnd-kit。效果如下可拖拽列表示例资料React生态中主流拖拽库的深度对比与选型指南选型决策矩阵代码importReact,{useState}fromreact;import{DndContext,closestCenter,PointerSensor,useSensor}fromdnd-kit/core;import{SortableContext,verticalListSortingStrategy,useSortable}fromdnd-kit/sortable;import{CSS}fromdnd-kit/utilities;constmockData[{id:1,name:项目一},{id:2,name:项目二},{id:3,name:项目三},{id:4,name:项目四},{id:5,name:项目五},{id:6,name:项目六},]constDragableList(){const[items,setItems]useState(mockData);constsensoruseSensor(PointerSensor,{activationConstraint:{distance:5,},});// 可排序列表项组件constSortableItem({item}){const{attributes,listeners,setNodeRef,transform,transition,isDragging,}useSortable({id:item.id});conststyle{transform:CSS.Transform.toString(transform),// 决定拖拽效果transition,opacity:isDragging?0.5:1,cursor:grab,padding:12px,margin:8px 0,backgroundColor:#f8f9fa,border:1px solid #dee2e6,borderRadius:4px,userSelect:none,};return(div ref{setNodeRef}style{style}{...attributes}{...listeners}// 如果拖拽的模块更复杂写在这个return里{item.name}/div);};consthandleDragEnd(event){const{active,over}event;if(active.id!over?.id){setItems((items){constoldIndexitems.findIndex(itemitem.idactive.id);constnewIndexitems.findIndex(itemitem.idover.id);// 重新排列数组constnewItems[...items];const[movedItem]newItems.splice(oldIndex,1);newItems.splice(newIndex,0,movedItem);returnnewItems;});}};return(div style{{padding:20px,maxWidth:400px,margin:0 auto}}h2可拖拽列表/h2DndContext sensors{[sensor]}collisionDetection{closestCenter}onDragEnd{handleDragEnd}SortableContext items{items.map((item)item.id)}strategy{verticalListSortingStrategy}{items.map((item)(SortableItem key{item.id}item{item}/))}/SortableContext/DndContextdiv style{{marginTop:20px,fontSize:14px,color:#6c757d}}p拖拽说明:/pulli点击并拖动项目可重新排序/lili当前项目数:{items.length}/li/ul/div/div);};exportdefaultDragableList;复杂组件// 可排序列表项组件constSortableItem({item}){const{attributes,listeners,setNodeRef,transform,transition,isDragging,}useSortable({id:item.id});conststyle{transform:CSS.Transform.toString(transform),// 决定拖拽效果transition,opacity:isDragging?0.5:1,cursor:grab,padding:12px,margin:8px 0,backgroundColor:#f8f9fa,border:1px solid #dee2e6,borderRadius:4px,userSelect:none,};return(div ref{setNodeRef}style{style}{...attributes}{...listeners}TooltipPopconfirm title确定删除这条属性吗onConfirm{()deleteAttr()}conCancel{(e){console.log(e)}}Button删除/Button/Popconfirm/Tooltip/div);};

相关新闻

国产大模型选型误区：别选参数，要选适配水温
2026/7/4 5:00:45

国产大模型选型误区：别选参数，要选适配水温

1. 为什么“选模型”这件事，从一开始就想错了？你点开这篇文章，大概率正被一个问题反复折磨：GLM-5、Kimi 2.5、Minimax M2.5、千问、豆包、通义千帆……国产大模型名字多得像奶茶店新品，参数榜单刷得比朋友圈还勤&#…

阅读更多
“希尔排序”是什么呢？什么原理？怎么用？有什么优势？
2026/7/4 4:00:45

“希尔排序”是什么呢？什么原理？怎么用？有什么优势？

一、为什么会有希尔排序？ 在希尔排序诞生之前（1959年），主流简单排序（冒泡、选择、插入）的时间复杂度均为 O(n)。计算机科学家发现了一个痛点： 插入排序在数据基本有序时效率极高，可…

阅读更多
GPT-5.5不存在？揭穿AI模型虚假命名背后的事实与风险
2026/7/4 4:00:45

GPT-5.5不存在？揭穿AI模型虚假命名背后的事实与风险

我不能按照您的要求生成关于“GPT-5.5”的博文内容，原因如下：该模型并不存在，且相关描述严重违背事实与合规底线。截至2024年7月（当前真实时间），OpenAI从未发布过 GPT-5，更不存在 GPT-5.5。官方…

阅读更多
aight与D3.js集成教程：让IE8-9也能运行现代数据可视化
2026/7/4 6:00:45

aight与D3.js集成教程：让IE8-9也能运行现代数据可视化

aight与D3.js集成教程：让IE8-9也能运行现代数据可视化 【免费下载链接】aight JavaScript shims and shams for making IE8-9 behave reasonably 项目地址: https://gitcode.com/gh_mirrors/ai/aight 在前端开发中，D3.js作为强大的数据可视化库&a…

阅读更多
深度解析：QiZhenGPT如何用1038K真实医疗数据训练出91.49%准确率的模型？
2026/7/4 6:00:45

深度解析：QiZhenGPT如何用1038K真实医疗数据训练出91.49%准确率的模型？

深度解析：QiZhenGPT如何用1038K真实医疗数据训练出91.49%准确率的模型？ 【免费下载链接】QiZhenGPT QiZhenGPT: An Open Source Chinese Medical Large Language Model｜一个开源的中文医疗大语言模型 项目地址: https://gitcode.com/gh_mir…

阅读更多
单相光伏并网逆变器系统设计与MPPT技术详解
2026/7/4 6:00:45

单相光伏并网逆变器系统设计与MPPT技术详解

1. 单相光伏并网逆变器系统概述 光伏并网逆变器作为太阳能发电系统的核心部件，承担着将光伏阵列产生的直流电转换为与电网同频同相交流电的关键任务。典型的单相系统由光伏阵列、DC-DC升压电路、全桥逆变电路、LC滤波器和电网连接部分组成。其中MPPT（最大…

阅读更多
Heya与ActionMailer对比分析：为什么选择Heya作为你的邮件序列解决方案
2026/7/4 6:00:45

Heya与ActionMailer对比分析：为什么选择Heya作为你的邮件序列解决方案

Heya与ActionMailer对比分析：为什么选择Heya作为你的邮件序列解决方案 【免费下载链接】heya Heya 👋 is a campaign mailer for Rails. Think of it like ActionMailer, but for timed email sequences. It can also perform other actions like sendin…

阅读更多
Primer设计系统表单组件最佳实践：TextInput、Select、Checkbox等表单元素设计指南
2026/7/4 6:00:45

Primer设计系统表单组件最佳实践：TextInput、Select、Checkbox等表单元素设计指南

Primer设计系统表单组件最佳实践：TextInput、Select、Checkbox等表单元素设计指南 【免费下载链接】design Primer Design Guidelines 项目地址: https://gitcode.com/gh_mirrors/des/design Primer设计系统（Primer Design Guidelines&#xff09…

阅读更多
Deepseek-V4与Claude-Opus-4.7编程实战对比：谁更懂中国开发者
2026/7/4 5:00:45

Deepseek-V4与Claude-Opus-4.7编程实战对比：谁更懂中国开发者

1. 项目概述：这不是一场参数竞赛，而是一次真实编码场景的“压力测试”最近两周，我连续在三个不同复杂度的真实项目中交叉使用Deepseek-V4和Claude-Opus-4.7，不是跑 benchmark，不是比 token 速度，而是把它们…

阅读更多
AI Coding 六个月真实ROI账本：产品经理的血泪教训，研发的冷静忠告
2026/7/3 19:49:14

AI Coding 六个月真实ROI账本：产品经理的血泪教训，研发的冷静忠告

6个月前的2025年12月，Boris Cherny 公开宣布自己卸载了 IDE。一时间，Vibe Coding 成了全行业最热的话题。6个月后，当我们回过头来拉一份真实账本，发现事情远没有"一句话生成一个App"那么浪漫。本文从产品经理和研发两个…

阅读更多
审计来了，数据权限全开——审计走了，怎么确保权限全部关掉？
2026/7/3 2:39:23

审计来了，数据权限全开——审计走了，怎么确保权限全部关掉？

引言：审计结束三个月了，审计员的权限还没关某城商行每年按照监管要求开展至少一次数据安全审计。审计期间，内审部门需要抽样检查各类业务数据——交易流水、客户信息、员工操作日志、权限配置记录。这些数据分布在不同系统中，审计…

阅读更多
Axure RP中文界面终极解决方案：3分钟告别英文困扰
2026/7/4 0:00:44

Axure RP中文界面终极解决方案：3分钟告别英文困扰

Axure RP中文界面终极解决方案：3分钟告别英文困扰 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在为Axure RP的英…

阅读更多
STM32F745VG与MC6470 IMU的高性能姿态控制系统设计
2026/7/4 0:00:44

STM32F745VG与MC6470 IMU的高性能姿态控制系统设计

1. MC6470与STM32F745VG的黄金组合解析在工业自动化和机器人控制领域，传感器与微控制器的协同工作能力直接决定了系统的响应速度和定位精度。MC6470作为一款6自由度惯性测量单元(6DOF IMU)，与STM32F745VG这款基于ARM Cortex-M7内核的高性能微控制器组合&…

阅读更多
本地部署SAM Audio音频语义分割模型完整指南
2026/7/4 0:00:44

本地部署SAM Audio音频语义分割模型完整指南

1. 项目概述：为什么要在本地跑 SAM Audio？这不只是“能用”，而是“必须用”SAM Audio——全称是 Segment Anything Model for Audio，不是 Meta 那个视觉领域的 SAM（Segment Anything Model）的简单移植&…

阅读更多
基于Dify与DeepSeek构建私有知识库问答系统实战指南
2026/7/3 2:40:23

基于Dify与DeepSeek构建私有知识库问答系统实战指南

在业务中快速构建一个能理解私有文档、准确回答专业问题的智能助手，是很多开发团队面临的共同挑战。传统方案往往需要从零开始搭建复杂的 RAG（检索增强生成）系统，涉及文档解析、向量化、检索、大模型调用等多个环节，整…

阅读更多
FAE放射组学分析工具：医学影像特征探索的完整解决方案
2026/7/4 5:24:16

FAE放射组学分析工具：医学影像特征探索的完整解决方案

FAE放射组学分析工具：医学影像特征探索的完整解决方案 【免费下载链接】FAE FeAture Explorer 项目地址: https://gitcode.com/gh_mirrors/fae/FAE 你是否曾经面对海量医学影像数据感到无从下手？想要从CT、MRI等影像中提取有价值的定量特征&#…

阅读更多
DesktopNaotu：你的终极离线思维导图解决方案，告别网络依赖！
2026/7/3 11:08:19

DesktopNaotu：你的终极离线思维导图解决方案，告别网络依赖！

DesktopNaotu：你的终极离线思维导图解决方案，告别网络依赖！ 【免费下载链接】DesktopNaotu 桌面版脑图 (百度脑图离线版，思维导图) 跨平台支持 Windows/Linux/Mac OS. (A cross-platform multilingual Mind Map Tool) 项目地址:…

阅读更多