如何通过鼠标使Div可排序？

<div id="sortable-container">
  <div class="sortable-item" draggable="true">Item 1</div>
  <div class="sortable-item" draggable="true">Item 2</div>
  <div class="sortable-item" draggable="true">Item 3</div>
  <div class="sortable-item" draggable="true">Item 4</div>
</div>

.sortable-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

const container = document.getElementById('sortable-container');
let draggingItem = null;

container.addEventListener('dragstart', (event) => {
  draggingItem = event.target;
  event.dataTransfer.setData('text/plain', draggingItem.innerHTML);
});

container.addEventListener('dragover', (event) => {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
});

container.addEventListener('drop', (event) => {
  event.preventDefault();
  const targetItem = event.target;
  const temp = targetItem.innerHTML;
  targetItem.innerHTML = draggingItem.innerHTML;
  draggingItem.innerHTML = temp;
});