请使用vue2+sortabble+elementui去重新书写这段代码

在Vue 2中使用Sortable.js和Element UI创建一个可拖拽排序的树形列表，可以参考下面的代码。首先确保已经安装了`sortablejs`和`element-ui`库。

首先引入所需的模块：

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@element-ui/lib/theme-chalk/index.css">

然后在你的Vue组件中，编写这样的代码：

<template>
  <div>
    <el-tree
      :data="sortedTreeData"
      ref="treeRef"
      highlight-current
      @node-drag-end="onNodeDragEnd"
      show-checkbox
    ></el-tree>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '一级节点A',
          children: [
            { id: 2, name: '二级节点A1', parentId: 1 },
            { id: 3, name: '二级节点A2', parentId: 1 },
          ],
        },
        // 更多数据...
      ],
      sortedTreeData: JSON.parse(JSON.stringify(this.treeData)), // 复制一份原始数据
    };
  },
  mounted() {
    this.initSortable();
  },
  methods: {
    initSortable() {
      const sortable = new Sortable(this.$refs.treeRef.$el, {
        group: '__tree__', // 分组标识
        onEnd: ({ oldIndex, newIndex }) => {
          this.updateSortedTree(newIndex);
        },
      });
    },
    updateSortedTree(index) {
      if (index > -1) {
        this.sortedTreeData = this.treeData.slice(0, index)
          .concat([this.treeData[index]])
          .concat(this.treeData.slice(index + 1));
      } else {
        console.warn('不允许跨层级拖拽');
      }
    },
    onNodeDragEnd(e) {
      // 确保拖动的是同一个级别的节点
      if (e.model.parentId !== e.sourceModel.parentId) {
        console.warn('不允许跨层级拖拽');
        e.preventDefault();
      } else {
        this.updateSortedTree(e.newIndex);
      }
    },
  },
};
</script>

在这个例子中，我们初始化了一个Sortable实例，当拖拽结束时，会触发`updateSortedTree`函数更新排序后的数据。同时，我们在`onNodeDragEnd`事件处理器中检查拖动是否跨越了层级，如果跨越，则警告用户并阻止操作。