首先设置列表项draggable=”true”并绑定dragstart、dragover、drop事件，通过JavaScript监听拖拽行为并调用insertBefore调整DOM顺序，实现原生拖拽排序。
使用 HTML5 原生的 Drag and Drop API 实现列表项拖拽排序，无需引入第三方库，适合轻量级交互场景。核心思路是为列表项设置可拖拽属性，并监听拖放事件来调整 DOM 顺序。
启用拖拽并绑定事件
要使列表项可拖拽，需设置 draggable=”true”，并对每个 li 元素绑定拖拽相关事件：
dragstart：记录被拖动的元素 dragover：阻止默认行为以允许放置 drop：执行元素交换或插入 dragend（可选）：清理状态
示例结构：
id=”sortable”>
draggable=”true”>项目 1
draggable=”true”>项目 2
draggable=”true”>项目 3
JavaScript 实现拖拽逻辑
通过脚本控制拖拽流程：
立即学习“前端免费学习笔记（深入）”；
const list = document.getElementById(‘sortable’);
let draggedItem = null;
// 拖拽开始
list.addEventListener(‘dragstart’, function(e) {
draggedItem = e.target;
e.dataTransfer.effectAllowed = ‘move’;
});
// 允许放置
list.addEventListener(‘dragover’, function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = ‘move’;
});
// 处理放置：将拖动项插入到目标位置
list.addEventListener(‘drop’, function(e) {
e.preventDefault();
if (e.target !== draggedItem && e.target.tagName === ‘LI’) {
const children = Array.from(list.children);
const targetIndex = children.indexOf(e.target);
const draggedIndex = children.indexOf(draggedItem);
if (targetIndex > draggedIndex) {
list.insertBefore(draggedItem, e.target.nextSibling);
} else {
list.insertBefore(dragedItem, e.target);
}
}
});
视觉反馈优化体验
添加 CSS 样式提升交互感：
li[draggable] {
cursor: move;
}
li:hover {
background-color: #f0f0f0;
}
li:active {
opacity: 0.7;
}
在 dragstart 和 dragend 中也可以动态添加类名，突出当前拖拽项。
基本上就这些。原生实现简单直接，适用于基础排序需求，不复杂但容易忽略细节如 preventDefault 和 DOM 插入逻辑。
以上就是html5使用drag和drop排序列表项 html5实现列表项拖拽排序的交互效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587192.html
微信扫一扫 
支付宝扫一扫 
