JS实现列表拖拽排序，3种超简单方法教会你！

文章不知道大家是否熟悉？今天我将给大家介绍《JS实现拖拽排序？3种超简单方法搞定列表排序！》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

实现拖拽排序需监听dragstart、dragover、drop事件并动态调整DOM位置，具体步骤为：1.为列表项添加draggable属性；2.在dragstart中记录拖拽元素；3.在dragover中阻止默认行为；4.在drop中根据鼠标位置交换元素位置。性能优化方面可通过requestAnimationFrame延迟更新、限制拖拽频率等方式减少重绘重排。交互方式除原生拖拽外还包括上下箭头按钮、拖拽手柄和数字输入框。持久化排序结果可通过获取排序后的ID数组并发送至后端保存，后端更新数据库中的排序字段即可完成。

实现拖拽排序，核心在于监听元素的拖拽事件，并动态调整元素在DOM中的位置。简单来说，就是抓住、移动、放下。

解决方案

首先，我们需要为列表项添加 draggable="true" 属性，使其可以被拖拽。然后，监听 dragstart、dragover、drop 这三个关键事件。dragstart 记录开始拖拽的元素，dragover 阻止默认行为，允许元素被放置，drop 则负责实际的元素位置交换。

<ul id="sortable-list">
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
  <li draggable="true">Item 3</li>
</ul>

<script>
  const list = document.getElementById('sortable-list');
  let draggedItem = null;

  list.addEventListener('dragstart', (e) => {
    draggedItem = e.target;
    e.target.classList.add('dragging'); // 可选：添加拖拽样式
  });

  list.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  list.addEventListener('drop', (e) => {
    e.preventDefault();
    if (e.target.tagName === 'LI' && e.target !== draggedItem) {
      const rect = e.target.getBoundingClientRect();
      const mouseY = e.clientY;
      //判断鼠标位置是否在目标元素中心之上
      if(mouseY < rect.top + rect.height / 2){
        list.insertBefore(draggedItem, e.target);
      }else{
        list.insertBefore(draggedItem, e.target.nextSibling);
      }
    }
    draggedItem.classList.remove('dragging'); // 可选：移除拖拽样式
    draggedItem = null;
  });

  list.addEventListener('dragend', (e) => {
    e.target.classList.remove('dragging');
  });
</script>

这段代码是最基础的实现。它没有考虑复杂的边界情况，也没有添加视觉反馈。但是，它能让你快速理解拖拽排序的核心逻辑。

如何优化拖拽排序的性能，避免页面卡顿？

拖拽过程中频繁更新DOM会导致性能问题。一种优化方法是使用 requestAnimationFrame 来延迟DOM更新，减少重绘和重排的次数。另一种方法是使用“虚拟DOM”或者“影子DOM”，先在内存中进行排序，最后一次性更新实际DOM。此外，还可以限制拖拽的频率，比如使用 throttle 函数。但说实话，对于小型列表，这些优化可能意义不大，甚至适得其反。关键在于找到性能瓶颈，针对性地优化。

除了原生拖拽，还有哪些实现列表排序的交互方式？

除了原生拖拽，还可以考虑以下几种交互方式：

1. 上下箭头按钮: 每个列表项旁边放置上下箭头按钮，点击按钮可以上下移动列表项。这种方式简单直接，但操作效率较低。适合列表项较少，对操作流畅度要求不高的场景。
2. 拖拽手柄: 在列表项旁边添加一个拖拽手柄（例如一个小图标），用户只能通过拖拽手柄来移动列表项。这种方式可以避免误操作，提高用户体验。实现上，只需要将拖拽事件绑定到拖拽手柄上即可。
3. 数字输入框: 在列表项旁边添加一个数字输入框，用户可以直接输入列表项的目标位置。这种方式适合列表项非常多，需要精确排序的场景。但用户体验相对较差，需要额外的验证和提示。

选择哪种交互方式，取决于具体的应用场景和用户需求。没有最好的方案，只有最合适的方案。

如何持久化拖拽排序后的结果，例如保存到数据库？

最简单的方法是获取排序后的列表项的ID数组，然后将这个数组保存到数据库。例如：

const sortedIds = Array.from(list.children).map(item => item.id);
// 将 sortedIds 发送到后端保存
fetch('/save-order', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ order: sortedIds })
})
.then(response => response.json())
.then(data => {
  console.log('保存成功', data);
});

后端接收到ID数组后，需要更新数据库中对应记录的排序字段。这个排序字段可以是整数，也可以是字符串。关键在于保持排序字段的一致性，方便后续查询和展示。当然，如果数据量非常大，可能需要考虑更复杂的排序算法和数据库优化方案，例如使用 Redis 等缓存数据库。但对于大多数应用来说，这种简单的方案已经足够了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~