js如何实现简单的拖拽排序 列表排序的3种交互实现方法！

<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>

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);
});