el-tree如何使用Sortable.js进行拖拽

el-tree是Element UI中的一个组件，它提供了树形结构的展示和交互功能。而Sortable.js是一个用于拖拽排序的JavaScript插件。如果要在el-tree中使用Sortable.js进行拖拽排序，可以按照以下步骤进行：

1. 安装Sortable.js和其依赖的插件，可以使用npm或者直接引入CDN链接：

//使用npm安装
npm install sortablejs --save

//在HTML中引入CDN链接
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>

2. 在el-tree中添加`@node-drop`事件，该事件会在节点被拖拽到目标节点时触发。

<el-tree
    :data="treeData"
    @node-drop="handleNodeDrop"
></el-tree>

3. 在`handleNodeDrop`函数中使用Sortable.js的API进行拖拽排序操作，具体实现可以参考以下代码：

methods: {
    handleNodeDrop(draggingNode, dropNode, dropType) {
      //在这里使用Sortable.js进行拖拽排序操作
      const draggingEl = draggingNode.$el;
      const dropEl = dropNode.$el;

      //如果拖拽的节点是一个子节点，需要先将其从父节点中删除
      if (draggingNode.parent) {
        draggingNode.parent.removeChild(draggingNode);
      }

      //获取父节点和子节点的数据
      const parentData = draggingNode.parent.data;
      const childData = draggingNode.data;

      //确定拖拽的方向
      const direction = dropType === 'before' ? -1 : 1;

      //获取目标节点在父节点的索引位置
      const targetIndex = parentData.children.indexOf(dropNode.data);

      //将子节点插入到目标节点的位置
      parentData.children.splice(targetIndex + direction, 0, childData);

      //更新视图
      this.$nextTick(() => {
        const draggingNodeEl = this.$refs.tree.getNode(draggingNode.key).$el;
        const dropNodeEl = this.$refs.tree.getNode(dropNode.key).$el;
        const draggingRect = draggingEl.getBoundingClientRect();
        const dropRect = dropEl.getBoundingClientRect();
        const offsetX = dropType === 'before' ? 0 : dropRect.width;
        const offsetY = dropRect.height / 2 - draggingRect.height / 2;
        const translateX = dropRect.left - draggingRect.left + offsetX;
        const translateY = dropRect.top - draggingRect.top + offsetY;

        //使用CSS3动画将拖拽的节点移动到目标位置
        draggingNodeEl.style.transform = `translate(${translateX}px, ${translateY}px)`;
        draggingNodeEl.style.transition = 'all 0.2s';
        draggingNodeEl.addEventListener('transitionend', () => {
          draggingNodeEl.style.transform = '';
          draggingNodeEl.style.transition = '';
        }, { once: true });
      });
    }
}

在上述代码中，我们首先获取了拖拽的节点和目标节点的DOM元素，然后通过计算它们之间的位置差，使用CSS3动画将拖拽的节点移动到目标位置。在动画结束后，我们再将拖拽的节点插入到目标节点的位置，并更新树形结构的视图。

总之，使用Sortable.js进行拖拽排序需要结合el-tree组件的`@node-drop`事件来实现，具体的实现方式可以根据项目的需求进行调整。