vue 实现可拖曳的树状结构图

methods:{
    dragstart(e,nodeObj){
      console.log('🐉drag移动的点位',nodeObj.name,);
      let transData=JSON.stringify(nodeObj)//拖曳传递过去的数据先转为JSON格式
      e.dataTransfer.setData("node",transData)
    },
    dragover(e){
      e.preventDefault()
    },
    drop(e,nodeObj){
      console.log('🐉drop到的点位',nodeObj.name);
      let getData=JSON.parse( e.dataTransfer.getData("node"))
      console.log('获取了数据',getData);
    }
  }

import Vue from "vue"
const busEvent= new Vue({
  data(){
    return{
      dragNodeIndex:-1,//拖曳节点在父节点children数组中的index
    }
  },
  created(){
    this.$on("transDragNodeIndex", res=>{//通过$on来监听$emit,需要确保自定义事件在触发前被监听，也就是订阅先于发布，否则无法监听到数据，我eventBus没怎么用过，这算是个坑
      this.dragNodeIndex=res
    })
  }
})

export default busEvent

ifFatherDragToSon(dragObj,dropObj){//判断是否父节点移动到了子节点
      if (dragObj.children.length === 0) return false;
      let newArr = [];
      function getAllName(dragObj) {
        newArr.push(...dragObj.children);
        if (dragObj.children.length === 0) {
          return;
        } else {
          for (let i = 0; i < dragObj.children.length; i++) {
            getAllName(dragObj.children[i]);
          }
        }
      }
      getAllName(dragObj);
      if (newArr.includes(dropObj)) {
        return true;
      }
      return false;
    }