首页 > 文章 > 前端

HTML5拖拽排序实现教程

时间：2025-11-02 13:12:57 406浏览收藏

珍惜时间，勤奋学习！今天给大家带来《HTML5拖拽排序列表实现方法》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

首先设置列表项draggable="true"并绑定dragstart、dragover、drop事件，通过JavaScript监听拖拽行为并调用insertBefore调整DOM顺序，实现原生拖拽排序。

html5使用drag和drop排序列表项 html5实现列表项拖拽排序的交互效果

使用 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拖拽排序实现教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于HTML5,列表,拖拽排序,DragandDropAPI,draggable的内容请关注golang学习网公众号！

前往漫画官网入口并下载 ➜

HTML5 列表拖拽排序 DragandDropAPI draggable