当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5拖放排序列表实现教程

HTML5拖放排序列表实现教程

2025-12-22 17:47:46 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《HTML5拖放排序列表实现方法》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

答案：通过HTML5的drag and drop API结合JavaScript可实现列表拖拽排序。设置draggable="true"并绑定dragstart、dragover、drop等事件，在dragstart中保存数据，dragover中阻止默认行为，drop时插入元素并更新DOM，配合dragenter/dragleave添加视觉反馈，提升交互体验。

HTML5代码如何制作可排序列表 HTML5代码拖放排序的逻辑

实现可排序列表的拖放功能，HTML5原生提供了drag and drop API，结合JavaScript可以轻松完成列表项的拖拽排序。不需要额外框架，仅用HTML5和JS即可实现。

启用拖拽的基本HTML结构

要让列表项可拖动，需设置draggable="true"，并为每个可拖动元素绑定事件。

项目 1
项目 2
项目 3

关键属性说明：

draggable="true"：使元素可拖动
通过ondragstart指定拖动开始时的数据
用ondragover阻止默认行为以允许放置
用ondrop处理放置逻辑

拖放排序的核心JavaScript逻辑

为实现排序，需监听拖拽事件并操作DOM。

document.addEventListener('DOMContentLoaded', () => {
  const list = document.getElementById('sortable-list');
  let draggedItem = null;

  // 拖动开始
  list.addEventListener('dragstart', (e) => {
    draggedItem = e.target;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', e.target.innerHTML);
  });

  // 允许在目标上放置
  list.addEventListener('dragover', (e) => {
    e.preventDefault(); // 必须阻止默认，否则drop无效
    e.dataTransfer.dropEffect = 'move';
    return false;
  });

  // 进入目标时视觉提示
  list.addEventListener('dragenter', (e) => {
    if (e.target.tagName === 'LI') {
      e.target.classList.add('drag-over');
    }
  });

  // 离开时移除提示
  list.addEventListener('dragleave', (e) => {
    if (e.target.tagName === 'LI') {
      e.target.classList.remove('drag-over');
    }
  });

  // 放置时交换位置
  list.addEventListener('drop', (e) => {
    e.preventDefault();
    if (e.target.tagName === 'LI' && e.target !== draggedItem) {
      const targetItem = e.target;
      // 插入到目标之前或之后
      if (list.contains(draggedItem)) {
        list.removeChild(draggedItem);
      }
      list.insertBefore(draggedItem, targetItem.nextSibling === draggedItem ? targetItem : targetItem);
      // 清理样式
      Array.from(list.children).forEach(li => li.classList.remove('drag-over'));
    }
    return false;
  });
});