vue2 el-menu可拖拽

要实现Vue2中的可拖拽菜单（el-menu），你可以使用vue-draggable作为拖拽库。

首先，你需要安装vue-draggable：

npm install vuedraggable --save

然后，你需要使用vuedraggable创建可拖拽菜单：

<template>
  <el-menu>
    <draggable v-model="menuItems" :options="{group:{name:'menu-items'}}">
      <el-submenu v-for="item in menuItems" :key="item.index" :index="item.index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="subItem in item.children" :key="subItem.index" :index="subItem.index">{{ subItem.title }}</el-menu-item>
      </el-submenu>
    </draggable>
  </el-menu>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      menuItems: [
        {
          index: '1',
          title: 'Option 1',
          icon: 'el-icon-location',
          children: [
            { index: '1-1', title: 'Option 1-1' },
            { index: '1-2', title: 'Option 1-2' }
          ]
        },
        {
          index: '2',
          title: 'Option 2',
          icon: 'el-icon-menu',
          children: [
            { index: '2-1', title: 'Option 2-1' },
            { index: '2-2', title: 'Option 2-2' }
          ]
        }
      ]
    }
  }
}
</script>

在上面的代码中，我们使用了vuedraggable来包装el-menu。我们还为每个el-submenu和el-menu-item设置了相应的index属性，以便在拖拽过程中正确地排序这些元素。

注意，我们还为vuedraggable设置了一个选项，即将组名设置为“menu-items”。这是为了确保拖拽元素只会在菜单内进行排序。

现在你可以拖动菜单项并进行排序了。