vue3 sortablejs

// 引入 Vue 3 和 SortableJS
import { createApp } from 'vue';
import Sortable from 'sortablejs';

// 创建 Vue 应用
const app = createApp({
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  mounted() {
    // 在组件挂载后初始化 SortableJS
    const el = this.$refs.sortableList;
    new Sortable(el, {
      onEnd: (evt) => {
        // 更新数据以反映新的顺序
        const item = this.items.splice(evt.oldIndex, 1)[0];
        this.items.splice(evt.newIndex, 0, item);
      }
    });
  }
});

// 挂载应用到 DOM 元素
app.mount('#app');

解释说明：

1. 引入依赖：首先引入 Vue 3 和 SortableJS。
2. 创建 Vue 应用：使用 createApp 创建一个新的 Vue 应用实例，并定义一个包含可排序项的 items 数组。
3. 挂载后初始化 SortableJS：在 mounted 生命周期钩子中，通过 this.$refs.sortableList 获取 DOM 元素，并使用 SortableJS 初始化该元素为可拖拽列表。
4. 事件处理：当用户结束拖拽时，触发 onEnd 事件，更新 items 数组以反映新的顺序。
5. 挂载应用：最后将 Vue 应用挂载到指定的 DOM 元素（例如 #app）。

确保在 HTML 文件中有如下结构：

<div id="app">
  <ul ref="sortableList">
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</div>