实现HTML5拖放排序需用drag and drop API，首先设置draggable="true"的列表项，通过监听dragstart、dragover和drop事件控制拖拽流程，在drop时根据鼠标位置插入元素并调用updateDataOrder同步dataList顺序，结合CSS类添加视觉反馈，最终实现无第三方库的轻量级排序功能。
实现HTML5拖放排序功能，核心是利用原生的drag and drop API结合DOM操作，完成元素顺序调整并同步更新对应数据。整个过程不需要引入额外库，适合轻量级场景。
1. 拖放排序的基本HTML结构
需要一个可拖动的容器和多个可排序的子项。每个子项设置draggable="true"以启用拖拽。
- 项目 1
- 项目 2
- 项目 3
其中data-id用于绑定数据标识，在更新时定位具体条目。
2. 实现拖放事件监听
为每个可拖动元素添加dragstart、dragover、drop事件处理，控制拖拽行为和位置插入。
立即学习“前端免费学习笔记（深入）”；
const list = document.getElementById('sortable-list');
let draggedItem = null;
// 开始拖动
list.addEventListener('dragstart', (e) => {
draggedItem = e.target;
e.dataTransfer.effectAllowed = 'move';
});
// 允许放置（阻止默认行为）
list.addEventListener('dragover', (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
// 执行放置
list.addEventListener('drop', (e) => {
e.preventDefault();
const target = e.target.closest('li');
if (target && target !== draggedItem) {
// 插入到目标位置之前或之后
const rect = target.getBoundingClientRect();
const midpoint = (rect.top + rect.bottom) / 2;
if (e.clientY < midpoint) {
list.insertBefore(draggedItem, target);
} else {
list.insertBefore(draggedItem, target.nextSibling);
}
// 触发数据更新
updateDataOrder();
}
});
关键点：在dragover中调用preventDefault()才能触发drop；使用closest('li')确保目标是列表项。
ReportPlus数据报表中心小程序
下载
ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件
3. 同步更新数据数组
拖动完成后，需将DOM顺序映射回JavaScript数据结构，保持状态一致。
let dataList = [
{ id: 1, name: '项目 1' },
{ id: 2, name: '项目 2' },
{ id: 3, name: '项目 3' }
];
function updateDataOrder() {
const itemElements = list.querySelectorAll('li');
const newOrder = Array.from(itemElements).map(el => {
const id = parseInt(el.getAttribute('data-id'));
return dataList.find(item => item.id === id);
}).filter(Boolean);
dataList = newOrder;
console.log('新顺序:', dataList);
}
通过data-id匹配原始数据对象，重新构建有序数组。此方法适用于简单对象引用，若数据复杂可考虑深拷贝或状态管理。
4. 可选优化：视觉反馈与动画
提升用户体验，可在拖动时添加样式提示。
// CSS 示例
li.dragging {
opacity: 0.5;
background: #e0f7fa;
}
// JS 中添加类
list.addEventListener('dragstart', (e) => {
e.target.classList.add('dragging');
draggedItem = e.target;
});
list.addEventListener('dragend', (e) => {
e.target.classList.remove('dragging');
});
这样用户能清晰看到正在拖动的元素和插入位置。
基本上就这些。原生拖放实现简单直接，适合静态列表排序。如果项目更复杂（如嵌套排序、跨容器拖拽），建议使用SortableJS等成熟库，但理解底层机制仍是必要的。
