js 组件拖拽排序

<ul id="sortable-list">
  <li draggable="true" @dragstart="dragStart" @dragover.prevent @drop="drop">Item 1</li>
  <li draggable="true" @dragstart="dragStart" @dragover.prevent @drop="drop">Item 2</li>
  <li draggable="true" @dragstart="dragStart" @dragover.prevent @drop="drop">Item 3</li>
</ul>

<script>
  let draggedItem = null;

  function dragStart(event) {
    draggedItem = event.target;
  }

  function drop(event) {
    event.preventDefault();
    const dropTarget = event.target;
    if (dropTarget && draggedItem !== dropTarget) {
      // 交换 DOM 元素位置
      const temp = document.createElement('div');
      dropTarget.parentNode.insertBefore(temp, dropTarget);
      draggedItem.parentNode.insertBefore(dropTarget, draggedItem);
      temp.parentNode.insertBefore(draggedItem, temp);
      temp.parentNode.removeChild(temp);

      // 更新数据模型（如果有的话）
      updateDataModel();
    }
  }

  function updateDataModel() {
    // 这里应该包含更新应用程序数据模型的代码
    console.log('Data model updated');
  }
</script>