答案：使用原生JavaScript实现拖拽排序，通过监听dragstart、dragover和dragend事件，结合preventDefault和动态插入元素完成列表项排序，支持视觉反馈与顺序获取。
拖拽排序是网页开发中常见的交互需求，比如在任务管理、图库排序等场景中非常实用。使用原生 JavaScript 可以轻松实现这一功能，无需依赖第三方库。下面是一个完整的、可直接运行的拖拽排序实现方案。
1. HTML 结构
我们用一个无序列表 ul 来展示可排序的项目，每个列表项都可被拖动。
- 项目 1
- 项目 2
- 项目 3
- 项目 4
2. CSS 样式（可选）
添加一些基本样式，提升用户体验，比如拖动时的视觉反馈。
#sortable { list-style: none; padding: 0;}sortable li {
padding: 10px;margin: 5px 0;background: #f4f4f4;border: 1px solid #ddd;cursor: move;}
sortable li.dragging {
opacity: 0.5;background: #bbdefb;}
3. JavaScript 实现拖拽排序
通过监听 drag 事件完成排序逻辑：
立即学习“Java免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', function () { const list = document.getElementById('sortable'); let draggedItem = null;// 开始拖拽list.addEventListener('dragstart', function (e) {if (e.target.tagName === 'LI') {draggedItem = e.target;e.target.classList.add('dragging');// 延迟执行，避免立即插入自身setTimeout(() => e.target.classList.add('hide'), 0);}});
// 拖拽过程中list.addEventListener('dragover', function (e) {e.preventDefault(); // 允许放置const afterElement = getDragAfterElement(list, e.clientY);const currentDragging = document.querySelector('.dragging');if (!afterElement) {list.appendChild(draggedItem);} else {list.insertBefore(draggedItem, afterElement);}});
// 拖拽结束list.addEventListener('dragend', function (e) {if (e.target.tagName === 'LI') {e.target.classList.remove('dragging', 'hide');}});
// 辅助函数：找到鼠标下方应插入位置的元素function getDragAfterElement(container, mouseY) {const elements = [...container.querySelectorAll('li:not(.dragging)')];return elements.reduce((closest, child) => {const box = child.getBoundingClientRect();const offset = mouseY - box.top - box.height / 2;if (offset closest.offset) {return { offset: offset, element: child };} else {return closest;}}, { offset: Number.NEGATIVE_INFINITY }).element;}});
说明：
draggable=”true” 启用拖拽功能。dragstart：记录被拖动的元素，并添加样式类。dragover：必须阻止默认行为才能触发 drop，同时动态调整插入位置。getDragAfterElement：根据鼠标 Y 坐标判断插入到哪个元素之前。dragend：清理样式，完成排序。
4. 扩展建议
如果需要将排序结果保存到后台或本地存储，可以在 dragend 事件中获取当前顺序：
function getSortOrder() { const items = document.querySelectorAll('#sortable li'); return Array.from(items).map(li => li.textContent);}// 示例：打印当前顺序console.log(getSortOrder());
基本上就这些。这个方案兼容现代浏览器，结构清晰，易于扩展和集成到实际项目中。不复杂但容易忽略细节，比如 preventDefault 和 insertBefore 的时机控制。
以上就是JS实现拖拽排序功能的完整代码_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536251.html
微信扫一扫 
支付宝扫一扫 
