js拖拽排序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Sorting</title>
<style>
  .list {
    list-style-type: none;
    padding: 0;
  }
  .item {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: grab;
  }
</style>
</head>
<body>

<ul id="sortableList" class="list">
  <li class="item" draggable="true">Item 1</li>
  <li class="item" draggable="true">Item 2</li>
  <li class="item" draggable="true">Item 3</li>
  <li class="item" draggable="true">Item 4</li>
</ul>

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

  list.addEventListener('dragstart', (event) => {
    draggedItem = event.target;
    event.dataTransfer.effectAllowed = 'move';
  });

  list.addEventListener('dragover', (event) => {
    event.preventDefault();
    const overItem = event.target;
    if (overItem && draggedItem !== overItem && overItem.nodeName === 'LI') {
      list.insertBefore(draggedItem, overItem.nextSibling);
    }
  });

  list.addEventListener('dragend', () => {
    draggedItem = null;
  });
</script>

</body>
</html>