el-tag 使用 sortablejs 实现拖拽

要使用sortable.js来实现el-tag的拖拽功能，你可以按照以下步骤进行操作：

1. 首先，确保已引入sortable.js库。可以通过在HTML中添加以下CDN链接或通过其他方式引入sortable.js：

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script>

2. 在Vue组件中，使用ref属性给el-tag标签添加一个引用名，以便后续操作：

<template>
  <div>
    <el-tag v-for="tag in tags" :key="tag" ref="tagItem">{{ tag }}</el-tag>
  </div>
</template>

3. 在mounted钩子函数中，使用sortable.js初始化拖拽功能，并指定el-tag作为可拖拽的元素：

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      tags: ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4'],
    };
  },
  mounted() {
    const tagContainer = this.$refs.tagItem;
    new Sortable(tagContainer, {
      animation: 150,
    });
  },
};
</script>

在上面的代码中，我们在mounted钩子函数中创建了一个Sortable实例，并将el-tag的引用传递给它。我们还可以根据需要设置其他选项，比如动画效果。

现在，当你在页面上拖动el-tag元素时，它们应该可以被重新排序。记得根据自己的实际需求进行样式和行为的定制。希望这对你有所帮助！