vue.draggable

// 引入 vue.draggable 组件
import draggable from 'vuedraggable';

export default {
  components: {
    draggable, // 注册 draggable 组件
  },
  data() {
    return {
      list: [ // 列表数据，用于展示可拖拽的项目
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
        { name: 'Item 4' },
      ],
    };
  },
  methods: {
    onMove({ relatedContext, draggedContext }) { // 拖拽时触发的事件
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (!relatedElement || !draggedElement) || (!relatedElement.fixed && !draggedElement.fixed);
    }
  },
  template: `
    <draggable v-model="list" @start="drag=true" @end="drag=false" @change="onMove">
      <div v-for="element in list" :key="element.name">
        {{ element.name }}
      </div>
    </draggable>
  `,
};

解释说明：

• vue.draggable 是一个基于 Vue.js 的拖拽组件库，通常用于实现列表项的拖拽排序功能。
• draggable 组件通过 v-model 绑定到一个数组（如 list），当用户拖拽元素时，数组中的顺序会随之改变。
• @start 和 @end 事件分别在拖拽开始和结束时触发，可以用来控制一些 UI 状态（如动画效果）。
• @change 事件用于监听拖拽过程中元素的变化，可以通过 onMove 方法来限制某些元素是否可以被拖拽。
• template 中使用了 v-for 来遍历 list 数组，并为每个元素生成一个 div，这些 div 就是可以拖拽的项目。

如果你需要更复杂的功能（如分组拖拽、与后端交互等），可以根据需求进一步扩展。