前端拖拽排序实现详解：基于原生 HTML5 API

1. 前言

在前端开发过程中，列表项的拖拽排序（Drag-and-Drop Sortable）不仅能让用户直观、高效地调整顺序，还能大幅提升交互体验。无论是管理后台的菜单排序、看板中任务卡片的调整，还是移动端的图片重排，拖拽排序都是不可或缺的交互模式。

本文将演示如何使用原生 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`

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="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> <ul id="sortable-list"> <li data-id="1" draggable="true">项目 1</li> <li data-id="2" draggable="true">项目 2</li> <li data-id="3" draggable="true">项目 3</li> <li data-id="4" draggable="true">项目 4</li> <li data-id="5" draggable="true">项目 5</li> </ul> <button id="saveOrderBtn">保存顺序</button> <script> const list = document.getElementById('sortable-list'); let dragSrcEl = null; function handleDragStart(e) { dragSrcEl = this; this.classList.add('dragging'); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', this.dataset.id); } function handleDragOver(e) { e.preventDefault(); // 必须阻止默认，才有 drop 事件 e.dataTransfer.dropEffect = 'move'; return false; } function handleDragEnter(e) { if (this !== dragSrcEl) { this.classList.add('over'); } } function handleDragLeave(e) { this.classList.remove('over'); } function handleDrop() { e.(); (dragSrcEl !== ) { nodes = .(list.); srcIndex = nodes.(dragSrcEl); targetIndex = nodes.(); (srcIndex < targetIndex) { list.(dragSrcEl, .); } { list.(dragSrcEl, ); } } ; } () { ..(); .(list.).( { item..(); }); } .(list.).( { item.(, handleDragStart); item.(, handleDragEnter); item.(, handleDragOver); item.(, handleDragLeave); item.(, handleDrop); item.(, handleDragEnd); }); .().(, { order = .(list.).( li..); .(, order); (, { : , : { : }, : .({ order }) }).( { (!res.) (); res.(); }).( { (); }).( { .(err); (); }); }); </script> </body> </html>

前端拖拽排序实现详解：基于原生 HTML5 API