vue3 ant design vue tree 超简单实现拖动排序

使用ant design vue 的tree组件,实现拖动排序
要求:

• 当前节点下的子节点拖动排序
• 不允许将外部节点拖进子节点
• 不允许将内部节点拖到外面

官方文档上的例子没有做任何限制,通过代码就能看出来,使用了递归,节点之间可以随意拖动,在原来的位置删除,在目标位置添加.刚开始觉得很复杂,就在网上搜了搜,还真找到一个,但是实现得非常复杂,我感觉其实只缺少一个条件,就能实现,也没他写的这么复杂,于是自己研究了一下,发现,只需要修改例子中的几行代码就能实现
闲话少说,直接上代码

<a-tree 
	draggable 
	:tree-data="gData" 
	@drop="onDrop"
/>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { TreeDataItem, DropEvent } from "ant-design-vue/es/tree/Tree";

export default defineComponent({
  setup() {
    const gData = ref<TreeDataItem[]>([
      {
        title: "1",
        key: "1",
        children: [
          {
            title: "11",
            key: "11",
            children: [
              { title: "111", key: "111" },
              { title: "222", key: "222" },
            ],
          },
          {
            title: "22",
            key: "22",
            children: [{ title: "333", key: "333" }],
          },
        ],
      },
      {
        title: "2",
        key: "2",
      },
    ]);

    const onDrop = (info: DropEvent) => {
      // 目标节点
      const dropKey = info.node.eventKey;
      // 拖动节点
      const dragKey = info.dragNode.eventKey;
      const dropPos = info.node.pos.split("-");
      // -1 上
      // 0 内
      // 1 下
      // 拖动的位置
      const dropPosition =
        info.dropPosition - Number(dropPos[dropPos.length - 1]);

      const loop = (data: TreeDataItem[], key: string, callback: any) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr);
          }
          if (item.children) {
            return loop(item.children, key, callback);
          }
        });
      };
      const data = [...gData.value];

      // 拖动节点的对象
      let dragObj: TreeDataItem = {};

      if (!info.dropToGap) {
        return false;
      } else if (
        (info.node.children || []).length > 0 &&
        info.node.expanded &&
        dropPosition === 1
      ) {
        return false;
      } else {
        let a: TreeDataItem[] = [];
        let ii = 0;
        loop(
          data,
          dragKey,
          (item: TreeDataItem, index: number, arr: TreeDataItem[]) => {
            a = arr;
            ii = index;
            dragObj = item;
          }
        );
        // 只允许当前节点下的子节点拖动排序
        if (a.some((item) => item.key === dropKey)) {
          a.splice(ii, 1);
          let ar: TreeDataItem[] = [];
          let i = 0;
          loop(
            data,
            dropKey,
            (item: TreeDataItem, index: number, arr: TreeDataItem[]) => {
              ar = arr;
              i = index;
            }
          );
          if (dropPosition === -1) {
            ar.splice(i, 0, dragObj);
          } else {
            ar.splice(i + 1, 0, dragObj);
          }
        }
      }
      gData.value = data;
    };
    return {
      gData,
      onDrop,
    };
  },
});
</script>

核心其实就是这一句代码,是不是很简单