前端拖拽排序实现详解：从原理到实践 - 附完整代码
🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战
🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解
🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用
🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例
✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧
💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程
🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整
👍《Spring Security》专栏中我们将逐步深入Spring Security的各个技术细节，带你从入门到精通，全面掌握这一安全技术
如果文章能够给大家带来一定的帮助！欢迎关注、评论互动～
前端拖拽排序实现详解：从原理到实践 - 附完整代码
1. 前言
在我们前端开发过程中经常会用到排序的功能，其中列表项的拖拽排序（Drag-and-Drop Sortable）不仅能让用户直观、高效地调整顺序，还能大幅提升交互体验。无论是管理后台的菜单排序、看板（Kanban）中任务卡片的调整，还是移动端的图片/视频重排，拖拽排序都是不可或缺的交互模式。
本文博主将带着小伙伴从零开始，用原生 HTML5 Drag & Drop API 实现一个简洁的可拖拽排序列表，并模拟向后端提交新顺序的完整流程。
2. 拖拽排序的应用
任务管理工具
用户可以拖拽卡片改变优先级或在不同分组间移动（如Trello）
内容管理系统
页面元素排序（如WordPress）
图片/视频排序
相册管理、商品轮播图顺序调整
问卷表单选项
管理问答列表时，调整题目或选项顺序更直观
自定义导航菜单
后台可视化拖拽菜单层级与顺序
这些场景下，通过拖拽排序，用户无需点上下箭头、输入序号，就能快速完成调整，显著提升效率与体验。
3. 核心实现原理
3.1 HTML5拖放API基础
HTML5 Drag & Drop 原生 API 核心流程如下：
- 设定可拖拽元素：
draggable="true" - 监听拖拽开始：
dragstart事件，记录当前拖拽项索引或标识 - 允许拖拽进入目标：在目标元素或容器上
dragover事件中调用event.preventDefault() - 处理放置：
drop事件中获取拖拽项和目标项索引，完成DOM位置交换。 - 结束拖拽：可选的
dragend事件，用于清理样式或状态。
3.2 关键事件解析
默认拖放API具备以下几个事件类型：
| 事件类型 | 触发时机 | 常用操作 |
|---|---|---|
dragstart | 开始拖拽元素时 | 设置被拖拽元素的ID |
dragenter | 进入目标元素时 | 添加视觉反馈 |
dragover | 在目标元素上悬停时 | 阻止默认行为（允许放置） |
dragleave | 离开目标元素时 | 移除视觉反馈 |
drop | 在目标元素上释放时 | 处理元素位置交换 |
dragend | 拖拽操作结束时 | 清理状态 |
4. 完整示例代码
下面是一个最小可运行的示例，小伙伴们可以复制至本地测试运行，注意后端排序保存已经将当前顺序的 ID 数组传递，后端接口小伙伴们自行实现即可
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>拖拽排序示例</title><style>body{font-family: sans-serif;padding: 20px;}#sortable-list{list-style: none;padding: 0;width: 300px;margin: 0 auto;}#sortable-list li{padding: 10px 15px;margin-bottom: 8px;background: #f0f0f0;border: 1px solid #ddd;cursor: move;user-select: none;}/* 拖拽时样式 */.dragging{opacity: 0.5;}.over{border-top: 2px solid #007bff;}</style></head><body><h2>拖拽排序示例</h2><ulid="sortable-list"><lidata-id="1"draggable="true">项目 1</li><lidata-id="2"draggable="true">项目 2</li><lidata-id="3"draggable="true">项目 3</li><lidata-id="4"draggable="true">项目 4</li><lidata-id="5"draggable="true">项目 5</li></ul><buttonid="saveOrderBtn">保存顺序</button><script>const list = document.getElementById('sortable-list');let dragSrcEl =null;functionhandleDragStart(e){ dragSrcEl =this;this.classList.add('dragging'); e.dataTransfer.effectAllowed ='move'; e.dataTransfer.setData('text/plain',this.dataset.id);}functionhandleDragOver(e){ e.preventDefault();// 必须阻止默认，才有 drop 事件 e.dataTransfer.dropEffect ='move';returnfalse;}functionhandleDragEnter(e){if(this!== dragSrcEl){this.classList.add('over');}}functionhandleDragLeave(e){this.classList.remove('over');}functionhandleDrop(e){ e.stopPropagation();// 阻止事件冒泡if(dragSrcEl !==this){// 在 DOM 中交换位置const nodes = Array.from(list.children);const srcIndex = nodes.indexOf(dragSrcEl);const targetIndex = nodes.indexOf(this);if(srcIndex < targetIndex){ list.insertBefore(dragSrcEl,this.nextSibling);}else{ list.insertBefore(dragSrcEl,this);}}returnfalse;}functionhandleDragEnd(e){// 清理样式this.classList.remove('dragging'); Array.from(list.children).forEach(item=>{ item.classList.remove('over');});}// 绑定事件 Array.from(list.children).forEach(item=>{ item.addEventListener('dragstart', handleDragStart); item.addEventListener('dragenter', handleDragEnter); item.addEventListener('dragover', handleDragOver); item.addEventListener('dragleave', handleDragLeave); item.addEventListener('drop', handleDrop); item.addEventListener('dragend', handleDragEnd);});// 模拟后端提交新顺序 document.getElementById('saveOrderBtn').addEventListener('click',()=>{const order = Array.from(list.children).map(li=> li.dataset.id); console.log('新的顺序：', order);// 示例：POST 到 /api/update-orderfetch('/api/update-order',{ method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ order })}).then(res=>{if(!res.ok)thrownewError('保存失败');return res.json();}).then(data=>{alert('顺序保存成功！');}).catch(err=>{ console.error(err);alert('保存失败，请重试');});});</script></body></html>要点说明：
1、每个<li>元素设置了draggable="true"和data-id作为唯一标识；
2、dragstart时记录源元素并设置拖拽数据；
3、dragover必须preventDefault()，否则无法触发drop；
4、drop事件中根据源元素和目标元素在父容器中的索引，动态交换位置；
5、点击“保存顺序”按钮后，将当前顺序的 ID 数组发送给后端接口/api/update-order，完成持久化。
5. 结语
通过上述示例，相信小伙伴们已经掌握了使用原生 HTML5 Drag & Drop API 实现前端拖拽排序的全流程：从可拖拽元素配置、事件监听，到 DOM 顺序交换，再到模拟后端提交。
该方案无需引入第三方库，也足够轻量易懂。可以根据项目需求进一步优化：
- 性能优化：对大型列表使用虚拟化或节流拖拽事件。
- 视觉增强：使用动画（
CSS transition）平滑排序过程。 - 多容器拖拽：扩展至跨列表、跨分组的拖拽。
- 第三方库：在复杂场景下可结合
SortableJS或Dragula等成熟库。
希望本文能帮助小伙伴们快速在项目中落地拖拽排序功能，如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言，最后希望大家一键三连给博主一点点鼓励！