前端开发攻略---轻松实现排序功能：利用JavaScript创建直观的拖拽排序体验

// HTML部分
<ul id="items-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <!-- 更多列表项 -->
</ul>
 
// JavaScript部分
document.addEventListener('DOMContentLoaded', function() {
  var dragSrcEl = null;
 
  function handleDragStart(e) {
    // 保存当前拖动的元素
    dragSrcEl = this;
 
    // 设置拖动效果
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }
 
  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault(); // 阻止默认行为
    }
 
    e.dataTransfer.dropEffect = 'move'; // 设置拖放视觉效果
 
    // 重新排序列表项
    var afterElement = getDragAfterElement(e.clientY);
    if (afterElement == null) {
      return;
    }
    if (dragSrcEl != this && afterElement != dragSrcEl) {
      dragSrcEl.parentNode.insertBefore(dragSrcEl, afterElement);
    }
  }
 
  function handleDrop(e) {
    // 阻止事件进一步传播
    e.stopPropagation();
 
    // 如果有其他元素被拖动的话，执行移动操作
    if (dragSrcEl != this) {
      dragSrcEl.parentNode.insertBefore(dragSrcEl, this);
    }
  }
 
  function handleDragEnd(e) {
    // 清除拖动元素
    dragSrcEl = null;
  }
 
  // 获取当前拖动元素应该插入的位置
  function getDragAfterElement(y) {
    var draggableElements = [...document.querySelectorAll('#items-list li')];
    for (var i = 0; i < draggableElements.length; i++) {
      var draggableElement = draggableElements[i];
      var rect = draggableElement.getBoundingClientRect();
      var offset = rect.height / 2;
      if (y > rect.top + offset && y < rect.bottom - offset) {
        return draggableElement; // 找到了正确的位置
      }
    }
    return null;
  }
 
  // 添加事件监听器到所有列表项
  var draggableItems = document.querySelectorAll('#items-list li');
  draggableItems.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });
});

这段代码实现了一个简单的拖拽排序功能。它首先定义了一些事件处理函数，然后在文档加载完成后，为每个列表项添加了拖动事件