使用vue自定义如何实现Tree组件和拖拽功能

vue自定义实现Tree组件和拖拽功能

实现功能：树结构、右键菜单、拖拽

效果图

vue2 + js版

/components/drag-tree/utils/utils.js

 
let _treeId =;
/**
 * 初始化树
 * @param {Array} tree 树的原始结构
 * @param {Object} props 树的字段值
 * @param {Boolean} defaultExpandAll 是否展开节点
 */
function initTree(tree, props, defaultExpandAll: boolean) {
  let right = localStorage.getItem("right");
  right = JSON.parse(right);
  return initTreed(tree,, props, defaultExpandAll, [], right);
}
/**
 * 初始化树
 * @param {Array} tree 树的原始结构
 * @param {Number} layer 层级
 * @param {Object} props 树的字段值
 * @param {Boolean} defaultExpandAll 是否展开节点
 * @param {Array} props 新树
 * @param {Array} right 判断节点展不展开
 */
function initTreed(tree, layer, props, defaultExpandAll, newTree, right) {
  for (let i =; i < tree.length; i++) {
    let obj {};
    for (const item in tree[i]) {
      if (item === props.label) {
        obj.label = tree[i][item];
      } else if (item === props.id) {
        obj.id = tree[i][item];
      } else if (item === props.children && tree[i][props.children].length) {
        obj.children = [];
      } else {
        obj[item] = tree[i][item];
        if (item === "children") {
          delete obj.children
        }
      }
    }
    if (right) {
      right.indexOf(obj.id) !== - ?
        (obj.defaultExpandAll = true) :
        (obj.defaultExpandAll = false);
    } else {
      obj.defaultExpandAll = defaultExpandAll;
    }
 
    obj._treeId = _treeId++;
    obj.layer = layer;
    obj.data = JSON.parse(JSON.stringify(tree[i]));
    newTree.push(obj);
    if ("children" in obj) {
      initTreed(
        tree[i][props.children],
        layer +,
        props,
        defaultExpandAll,
        newTree[i].children,
        right
      );
    }
    obj = {};
  }
  return newTree;
}
 
/**
 *
 * @param {Array} tree 树
 * @param {Number} layer 层级
 * @returns
 */
function draggableTree(tree: IAnyType[], layer) {
  for (let i =; i < tree.length; i++) {
    tree[i].layer = layer;
    if ("children" in tree[i]) {
      draggableTree(tree[i].children, layer +);
    }
  }
  return tree;
}
/**
 * 寻找
 */
function findNearestComponent(element, componentName) {
  let target = element;
  while (target && target.tagName !== "BODY") {
    if (target.__vue__ && target.__vue__.$options.name === componentName) {
      return target.__vue__;
    }
    target = target.parentNode;
  }
  return null;
}
export {
  initTree,
  draggableTree,
  findNearestComponent
};

/components/drag-tree/node.vue

 
<template>
  <div
    class="drag-tree item"
    :draggable="tree.draggable"
    @dragstart.stop="dragstart"
    @dragover.stop="dragover"
    @drop.stop="drop"
    @contextmenu="($event) => this.handleContextMenu($event)"
    ref="item"
    :id="data._treeId"
  >
    <!-- 每一行 -->
    <div
      style="height:px"
      :style="{ background: dropType == 'before' ? `#${draggableColor}` : '' }"
    ></div>
    <div
      @click="itemClick($event, data)"
      :class="['text', active === data.id ? 'is-current' : '']"
      :style="{
        height: height,
        lineHeight: height,
        fontSize: fontSize,
        position: 'relative',
        margin: ' auto',
      }"
    >
      <span
        :style="{
          display: 'inline-block',
          width: (data.layer -) * 18 + 'px',
        }"
      ></span>
      <img
        :class="[data.defaultExpandAll ? 'iconBottom' : 'iconRight']"
        v-show="data.children && data.children.length !=="
        :src="iconImg"
        :style="{
          width: fontSize,
          height: fontSize,
          display: 'inline-block',
          verticalAlign: 'middle',
          marginRight: 'px',
        }"
        alt=""
      />
      <span
        v-show="!data.children || data.children.length =="
        :style="{
          width: fontSize,
          height: fontSize,
          display: 'inline-block',
          verticalAlign: 'middle',
          marginRight: 'px',
        }"
      ></span>
      <img
        v-if="data.TreeImg"
        :src="dataImg"
        :style="{
          width: fontSize,
          height: fontSize +,
          display: 'inline-block',
          verticalAlign: 'middle',
          marginRight: 'px',
        }"
      />
      <span
        :style="{
          background: dropType == 'inner' ? `#${draggableColor}` : '',
          height: fontSize +,
          color: dropType == 'inner' ? '#fff' : '#d90b2',
          overflow: 'hidden',
        }"
        >{{ data.label }}{{ data.isCurrent }}</span
      >
      <node-content :node="data"></node-content>
    </div>
    <div
      style="height:px"
      :style="{ background: dropType == 'after' ? `#${draggableColor}` : '' }"
    ></div>
    <div
      v-if="data.children && data.children.length !="
      :class="[data.defaultExpandAll ? 'sonShow' : 'sonVanish', 'son']"
    >
      <my-node
        v-for="item in data.children"
        :key="item._treeId"
        :render-content="renderContent"
        :data="item"
        :active-id.sync="active"
      ></my-node>
    </div>
  </div>
</template>
 
<script>
import { findNearestComponent } from "./utils/utils.ts";
export default {
  name: "MyNode",
  props: {
    data: {
      // 接收的数据
      type: Object,
    },
    activeId: {
      type: [Number, String]
    },
    renderContent: Function,
  },
  components: {
    NodeContent: {
      props: {
        node: {
          required: true
        }
      },
      render(h) {
        const parent = this.$parent;
        const tree = parent.tree;
        const node = this.node;
        const { data, store } = node;
        return (
          parent.renderContent
            ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
            : tree.$scopedSlots.default
              ? tree.$scopedSlots.default({ node, data })
              : ''
        );
      }
    }
  },
  inject: ["draggableColor", "height", "fontSize", "icon"],
  data() {
    return {
      curNode: null,
      tree: "", // 最上一级
      dropType: "none",
      iconImg: "",
      dataImg: "",
    };
  },
  computed: {
    active: {
      set (val) {
        this.$emit("update:activeId", val);
      },
      get () {
        return this.activeId;
      }
    }
  },
  created() {
    let parent = this.$parent;
    if (parent.isTree) {
      this.tree = parent;
    } else {
      this.tree = parent.tree;
    }
    // console.log(this.$parent)
    // console.log(this.tree)
    // console.log(parent)
    // console.log(parent.isTree)
    // console.log(parent.tree)
    // 有没有自定义icon
    if (this.icon.length !=) {
      let s = this.icon.slice(, 2);
      let url = this.icon.slice();
      if (s == "@/") {
        this.iconImg = require(`@/${url}`);
      } else {
        this.iconImg = this.icon;
      }
    } else {
      this.iconImg = require("@/assets/images/business/tree/right.png");
    }
    if (this.data.TreeImg) {
      let s = this.data.TreeImg.slice(, 2);
      let url = this.data.TreeImg.slice();
      if (s == "@/") {
        this.dataImg = require(`@/${url}`);
      } else {
        this.dataImg = this.data.TreeImg;
      }
    }
  },
  mounted() {
    document.body.addEventListener('click', this.closeMenu);
  },
  destroyed() {
    document.body.removeEventListener('click', this.closeMenu);
  },
  methods: {
    closeMenu() {
      this.tree.$emit('close-menu');
    },
    handleContextMenu(event) {
      if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length >) {
        event.stopPropagation();
        event.preventDefault();
      }
      this.tree.$emit('node-contextmenu', event, this.data, this);
    },
    // 选择要滑动的元素
    dragstart(ev) {
      if (!this.tree.draggable) return;
      this.tree.$emit("node-start", this.data, this, ev);
    },
    // 滑动中
    dragover(ev) {
      if (!this.tree.draggable) return;
      ev.preventDefault();
      this.tree.$emit("node-over", this.data, this, ev);
    },
    // 滑动结束
    drop(ev) {
      if (!this.tree.draggable) return;
      this.tree.$emit("node-drop", this.data, this, ev);
    },
    // 行点击事件
    itemClick(ev, data) {
      let dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
      this.active = data.id;
      this.data.defaultExpandAll = !this.data.defaultExpandAll; // 改变树的伸缩状态
      this.tree.$emit("tree-click", this.data, dropNode);
      let right = localStorage.getItem("right");
      if (this.data.defaultExpandAll === true) {
        if (right) {
          right = JSON.parse(right);
          right.push(this.data.id);
        } else {
          right = [];
          right.push(this.data.id);
        }
      } else {
        if (right) {
          right = JSON.parse(right);
          right.indexOf(this.data.id) !== -
            ? right.splice(right.indexOf(this.data.id),)
            : "";
        }
      }
      localStorage.setItem("right", JSON.stringify(right));
    },
  },
};
</script>
 
<style lang="less">
.drag-tree {
  .text {
    color: #d90b2;
    font-size:px;
    height:px;
    line-height:px;
    cursor: pointer;
    &.is-current {
      background: #ff7fa;
    }
  }
  .text:hover {
    background: #ff7fa;
  }
  .iconBottom {
    transition:.3s;
    transform: rotate(deg);
  }
  .iconRight {
    transition:.3s;
    transform: rotate(deg);
  }
  .son {
    max-height:px;
    overflow: hidden;
    transition:.3s max-height;
  }
  .sonVanish {
    max-height:px;
  }
  .sonShow {
    max-height:px;
  }
  &-popover {
    width:px;
    height: auto;
    position: fixed;
    background: #fff;
    border:px solid #ddd;
    box-shadow: 1px 6px rgba(54, 54, 54, 0.2);
    z-index:;
    border-radius:px;
    &-item {
      color: #a6e;
      line-height:px;
      text-align: center;
      cursor: pointer;
      transition: background .s ease-in-out;
      &:hover, &:active {
        background: #ff3f3;
      }
    }
  }
}
</style>

/components/drag-tree/index.vue

 
<template>
  <div style="width:%; height: 100%">
    <Node
      :render-content="renderContent"
      v-for="item in root"
      :key="item._treeId"
      :data="item"
      :active-id.sync="activeId"
      :isTree="true"
    ></Node>
  </div>
</template>
 
<script>
import Node from "./node.vue";
import { initTree, findNearestComponent } from "./utils/utils.ts";
export default {
  name: "TreeDrag",
  components: {
    Node,
  },
  provide() {
    return {
      draggableColor: this.draggableColor,
      height: this.height,
      fontSize: this.fontSize,
      icon: this.icon,
    };
  },
  props: {
    data: {
      type: Array,
    },
    renderContent: Function,
    draggable: {
      // 是否开启拖拽
      type: Boolean,
      default: false,
    },
    defaultExpandAll: {
      // 是否默认展开所有节点
      type: Boolean,
      default: false,
    },
    draggableColor: {
      // 拖拽时的颜色
      type: String,
      default: "EFF",
    },
    height: {
      // 每行高度
      type: String,
      default: "px",
    },
    fontSize: {
      type: String,
      default: "px",
    },
    icon: {
      type: String,
      default: "",
    },
    props: {
      type: Object,
      default() {
        return {
          label: "label",
          children: "children",
        };
      },
    },
  },
  watch: {
    data(nerVal) {
      this.root = initTree(nerVal, this.props, this.defaultExpandAll); // 新树
      if (this.root?.length && !this.activeId) {
        this.activeId = this.root[].id;
      }
    },
    deep: true
  },
  data() {
    return {
      activeId:,
      startData: {}, // 拖拽时被拖拽的节点
      lg: null, // 拖拽经过的最后一个节点
      lg: null, // 拖拽经过的最后第二个节点
      root: null, // data的数据
      dragState: {
        showDropIndicator: false,
        draggingNode: null, // 拖动的节点
        dropNode: null,
        allowDrop: true,
      },
      odata: "",
    };
  },
  created() {
    this.odata = this.data;
    this.isTree = true; // 这是最高级
    this.root = initTree(this.data, this.props, this.defaultExpandAll); // 新树
 
    // 选择移动的元素 事件
    this.$on("node-start", (data, that, ev) => {
      this.startData = data;
      this.dragState.draggingNode = that;
      this.$emit("tree-start", that.data.data, that.data, ev);
    });
 
    // 移动事件
    this.$on("node-over", (data, that, ev) => {
      console.log()
      console.log(ev.target)
      if (that.$refs.item.id != this.lg) {
        this.lg = this.lg1;
        this.lg = that.$refs.item.id;
      }
      let dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
      const oldDropNode = this.dragState.dropNode; // 上一个节点
      if (oldDropNode && oldDropNode !== dropNode) {
        // 判断节点改没改变
        oldDropNode.dropType = "none";
      }
 
      const draggingNode = this.dragState.draggingNode; // 移动的节点
      console.log(draggingNode)
      console.log(dropNode)
      console.log(this.dragState)
      if (!draggingNode || !dropNode) return;
 
      console.log()
      let dropPrev = true; // 上
      let dropInner = true; // 中
      let dropNext = true; // 下
      ev.dataTransfer.dropEffect = dropInner ? "move" : "none";
      this.dragState.dropNode = dropNode;
 
      const targetPosition = dropNode.$el.getBoundingClientRect();
      const prevPercent = dropPrev
        ? dropInner
          ?.25
          : dropNext
          ?.45
          :
        : -;
      const nextPercent = dropNext
        ? dropInner
          ?.75
          : dropPrev
          ?.55
          :
        :;
      var dropType = "";
 
      const distance = ev.clientY - targetPosition.top;
      if (distance < targetPosition.height * prevPercent) {
        // 在上面
        dropType = "before";
      } else if (distance > targetPosition.height * nextPercent) {
        // 在下面
        dropType = "after";
      } else if (dropInner) {
        dropType = "inner";
      } else {
        dropType = "none";
      }
      if (this.digui(draggingNode.data, dropNode.data._treeId)) {
        dropType = "none";
      }
      dropNode.dropType = dropType;
      console.log()
      console.log(dropType)
      this.$emit("tree-over", that.data.data, that.data, ev, dropType);
    });
 
    // 移动结束 事件
    this.$on("node-drop", (data, that, ev) => {
      console.log(data, that, ev)
      console.log(this.startData)
      let sd = JSON.stringify(this.startData.data);
      let ad = JSON.stringify(this.data);
      let ss = ad.split(sd);
      let newData;
      ss = ss.join("");
      console.log(that.dropType)
      if (that.dropType == "none") {
        return;
      }
      console.log(that.dropType)
      if (this.lg != null && this.lg1 != this.startData._treeId) {
        // 删除startData
        ss = this.deleteStr(ss);
        let od = JSON.stringify(data.data);
        let a = ss.indexOf(od);
        console.log(newData)
        if (that.dropType == "after") {
          newData = JSON.parse(
            ss.substring(, a + od.length) +
              "," +
              sd +
              ss.substring(a + od.length)
          );
        } else if (that.dropType == "before") {
          if (a == -) {
            let s = this.deleteStr(od.split(sd).join(""));
            newData = JSON.parse(
              ss.substring(, ss.indexOf(s)) +
                sd +
                "," +
                ss.substring(ss.indexOf(s))
            );
          } else {
            newData = JSON.parse(
              ss.substring(, a) + sd + "," + ss.substring(a)
            );
          }
        } else if (that.dropType == "inner") {
          ss = JSON.parse(ss);
          this.oldData(ss, data.data, JSON.parse(sd));
          newData = ss;
        }
        console.log(newData)
        this.root = initTree(newData, this.props, this.defaultExpandAll); // 新树
        this.$parent.data = newData;
        this.lg = null;
        this.lg = null;
      }
 
      this.$emit(
        "tree-drop",
        this.data.data,
        this.data,
        ev,
        this.startData.id,
        data.id,
        that.dropType,
        this.root
      );
      that.dropType = "none";
    });
  },
  methods: {
    /**
     * 修改data，添加输入
     * @param {Array} ss 需要被加入的数据
     * @param {Object} data 落点
     * @param {Object} sd 需要加入的数据
     */
    oldData(ss, data, sd) {
      for (let i =; i < ss.length; i++) {
        if (JSON.stringify(ss[i]) == JSON.stringify(data)) {
          if ("children" in ss[i]) {
            ss[i].children.push(sd);
          } else {
            ss[i].children = [];
            ss[i].children.push(sd);
          }
          break;
        } else if ("children" in ss[i]) {
          this.oldData(ss[i].children, data, sd);
        }
      }
    },
    // 判断拖拽时贴近的是不是自己的子元素
    digui(data, id) {
      if (data.children && data.children.length !=) {
        for (let i =; i < data.children.length; i++) {
          if (data.children[i]._treeId == id) {
            return true;
          }
          let s = this.digui(data.children[i], id);
          if (s == true) {
            return true;
          }
        }
      }
    },
    deleteStr(ss) {
      if (ss.indexOf(",,") !== -) {
        ss = ss.split(",,");
        if (ss.length !==) {
          ss = ss.join(",");
        }
      } else if (ss.indexOf("[,") !== -) {
        ss = ss.split("[,");
        if (ss.length !==) {
          ss = ss.join("[");
        }
      } else if (ss.indexOf(",]") !== -) {
        ss = ss.split(",]");
        if (ss.length !==) {
          ss = ss.join("]");
        }
      }
      return ss;
    },
  },
};
</script>
 
<style scoped>
.drag {
  font-size:px;
  text-align: right;
  padding-right:px;
  cursor: pointer;
}
</style>

使用：Test.vue

 
<template>
  <div style="width:%; height: 100%;">
    <tree-drag
      ref="dragTree"
      @node-contextmenu="handleContextMenu"
      @tree-click="treeClick"
      @tree-drop="treeDrop"
      @close-menu="closeMenu"
      :data="data"
      :props="defaultProps"
      :draggable="true"
    >
    </tree-drag>
    <div class="drag-tree-popover" :style="style" v-if="isShowPopover">
      <div
        class="drag-tree-popover-item"
        v-for="(item, index) in popoverList"
        :key="index"
        @click="menuClick(item)"
      >
        <i class="iconfont" :class="'icon-' + item.type"></i>
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Test",
  data() {
    return {
      parent_id: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      popoverLeft:, // 距离左边的距离
      popoverTop:, // 距离顶部的距离
      isShowPopover: false, // 是否展示右键内容
      popoverList: [
        { name: "新增", type: "xinzeng" },
        { name: "编辑", type: "bianji" },
        { name: "删除", type: "shanchu" },
      ],
      treeNode: null,
      activeId:,
    };
  },
  created() {
    this.getTreeData();
  },
  computed: {
    // 计算出距离
    style() {
      return {
        left: this.popoverLeft + "px",
        top: this.popoverTop + "px",
      };
    },
  },
  methods: {
    // 显示自定义菜单
    handleContextMenu(event, node, that) {
      this.popoverLeft = event.clientX +;
      this.popoverTop = event.clientY;
      this.isShowPopover = true;
    },
    // 关闭菜单
    closeMenu() {
      this.isShowPopover = false;
    },
    treeClick(data) {
      this.activeId = data.id;
    },
    treeDrop(node, data, ev, startId, targetId, dropType, root) {
      console.log(startId, targetId, dropType, root);
    },
    // 菜单某一项被点击
    menuClick(item) {
      // 操作
      this.closeMenu();
    },
    // 判断activeId是否存在
    findIdIsExit(data, id) {
      if (data && data.length) {
        for (let i =; i < data.length; i++) {
          if (data[i].id == id) {
            return true;
          }
          if (data[i].children && data[i].children.length) {
            let s = this.findIdIsExit(data[i].children, id);
            if (s === true) {
              return true;
            }
          }
        }
      }
    },
    async getTreeData() {
      let res = await this.$service.invoke({});
      this.data = res?.result ? res.result : [];
      this.activeId = this.data[].id;
      this.$refs.dragTree.activeId = this.activeId;
    },
  },
};
</script>

vue2 + ts 版

只有两个组件的ts部分文件不一样，其他一样

/components/drag-tree/node.vue

 
<template>
  <div
    class="drag-tree item"
    :draggable="tree.draggable"
    @dragstart.stop="dragstart"
    @dragover.stop="dragover"
    @drop.stop="drop"
    @contextmenu="($event) => this.handleContextMenu($event)"
    ref="item"
    :id="data._treeId"
  >
    <!-- 每一行 -->
    <div
      style="height:px"
      :style="{ background: dropType == 'before' ? `#${draggableColor}` : '' }"
    ></div>
    <div
      @click="itemClick($event, data)"
      :class="['text', active === data.id ? 'is-current' : '']"
      :style="{
        height: height,
        lineHeight: height,
        fontSize: fontSize,
        position: 'relative',
        margin: ' auto',
      }"
    >
      <span
        :style="{
          display: 'inline-block',
          width: (data.layer -) * 18 + 'px',
        }"
      ></span>
      <img
        :class="[data.defaultExpandAll ? 'iconBottom' : 'iconRight']"
        v-show="data.children && data.children.length !=="
        :src="iconImg"
        :style="{
          width: fontSize,
          height: fontSize,
          display: 'inline-block',
          verticalAlign: 'middle',
          marginRight: 'px',
        }"
        alt=""
      />
      <span
        v-show="!data.children || data.children.length =="
        :style="{
          width: fontSize,
          height: fontSize,
          display: 'inline-block',
          verticalAlign: 'middle',
          marginRight: 'px',
        }"
      ></span>
      <img
        v-if="data.TreeImg"
        :src="dataImg"
        :style="{
          width: fontSize,
          height: fontSize +,
          display: 'inline-block',
          verticalAlign: 'middle',
          marginRight: 'px',
        }"
      />
      <span
        :style="{
          background: dropType == 'inner' ? `#${draggableColor}` : '',
          height: fontSize +,
          color: dropType == 'inner' ? '#fff' : '#d90b2',
          overflow: 'hidden',
        }"
        >{{ data.label }}{{ data.isCurrent }}</span
      >
      <node-content :node="data"></node-content>
    </div>
    <div
      style="height:px"
      :style="{ background: dropType == 'after' ? `#${draggableColor}` : '' }"
    ></div>
    <div
      v-if="data.children && data.children.length !="
      :class="[data.defaultExpandAll ? 'sonShow' : 'sonVanish', 'son']"
    >
      <my-node
        v-for="item in data.children"
        :key="item._treeId"
        :render-content="renderContent"
        :data="item"
        :active-id.sync="active"
      ></my-node>
    </div>
  </div>
</template>
 
<script lang="ts">
import node from "./node";
export default node;
</script>
 
<style lang="less">
.drag-tree {
  .text {
    color: #d90b2;
    font-size:px;
    height:px;
    line-height:px;
    cursor: pointer;
    &.is-current {
      background: #ff7fa;
    }
  }
  .text:hover {
    background: #ff7fa;
  }
  .iconBottom {
    transition:.3s;
    transform: rotate(deg);
  }
  .iconRight {
    transition:.3s;
    transform: rotate(deg);
  }
  .son {
    max-height:px;
    overflow: hidden;
    transition:.3s max-height;
  }
  .sonVanish {
    max-height:px;
  }
  .sonShow {
    max-height:px;
  }
  &-popover {
    width:px;
    height: auto;
    position: fixed;
    background: #fff;
    border:px solid #ddd;
    box-shadow: 1px 6px rgba(54, 54, 54, 0.2);
    z-index:;
    border-radius:px;
    &-item {
      color: #a6e;
      line-height:px;
      text-align: center;
      cursor: pointer;
      transition: background .s ease-in-out;
      &:hover, &:active {
        background: #ff3f3;
      }
    }
  }
}
</style>

/components/drag-tree/node.ts

 
import { Vue, Component, Prop, PropSync, Inject } from "vue-property-decorator";
import { findNearestComponent } from "./utils/utils";
@Component({
  name: "MyNode",
  components: {
    NodeContent: {
      props: {
        node: {
          required: true
        }
      },
      render(h) {
        const parent = this.$parent;
        const tree = parent.tree;
        const node = this.node;
        const { data, store } = node;
        return (
          parent.renderContent
            ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
            : tree.$scopedSlots.default
              ? tree.$scopedSlots.default({ node, data })
              : ''
        );
      }
    }
  }
})
export default class node extends Vue {
  @Prop() data: IAnyType
  @PropSync("activeId", { type: [Number, String] }) active!: string | number
  @Prop(Function) renderContent
 
  @Inject("draggableColor") readonly draggableColor!: string
  @Inject("height") readonly height!: string
  @Inject("fontSize") readonly fontSize!: string
  @Inject("icon") readonly icon!: string
 
  curNode = null
  tree: IAnyType // 最上一级
  dropType = "none"
  iconImg = ""
  dataImg = ""
 
  created(): void {
    const parent: any = this.$parent;
    if (parent.isTree) {
      this.tree = parent;
    } else {
      this.tree = parent.tree;
    }
    // 有没有自定义icon
    if (this.icon.length !=) {
      const s = this.icon.slice(, 2);
      const url = this.icon.slice();
      if (s == "@/") {
        this.iconImg = require(`@/${url}`);
      } else {
        this.iconImg = this.icon;
      }
    } else {
      this.iconImg = require("@/assets/images/business/tree/right.png");
    }
    if (this.data.TreeImg) {
      const s = this.data.TreeImg.slice(, 2);
      const url = this.data.TreeImg.slice();
      if (s == "@/") {
        this.dataImg = require(`@/${url}`);
      } else {
        this.dataImg = this.data.TreeImg;
      }
    }
  }
  mounted(): void {
    document.body.addEventListener("click", this.closeMenu);
  }
  destroyed(): void {
    document.body.removeEventListener("click", this.closeMenu);
  }
  closeMenu(): void {
    this.tree.$emit("close-menu");
  }
  handleContextMenu(event: DragEvent): void {
    if (this.tree._events["node-contextmenu"] && this.tree._events["node-contextmenu"].length >) {
      event.stopPropagation();
      event.preventDefault();
    }
    this.tree.$emit("node-contextmenu", event, this.data, this);
  }
  // 选择要滑动的元素
  dragstart(ev: DragEvent): void {
    if (!this.tree.draggable) return;
    this.tree.$emit("node-start", this.data, this, ev);
  }
  // 滑动中
  dragover(ev: DragEvent): void {
    if (!this.tree.draggable) return;
    ev.preventDefault();
    this.tree.$emit("node-over", this.data, this, ev);
  }
  // 滑动结束
  drop(ev: DragEvent): void {
    if (!this.tree.draggable) return;
    this.tree.$emit("node-drop", this.data, this, ev);
  }
  // 行点击事件
  itemClick(ev: DragEvent, data: IAnyType): void {
    const dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
    this.active = data.id;
    this.data.defaultExpandAll = !this.data.defaultExpandAll; // 改变树的伸缩状态
    this.tree.$emit("tree-click", this.data, dropNode);
    const right: string = localStorage.getItem("right");
    let rightArr: IAnyType[];
    if (right) {
      rightArr = JSON.parse(right);
    }
    if (this.data.defaultExpandAll === true) {
      if (right) {
        rightArr.push(this.data.id);
      } else {
        rightArr = [];
        rightArr.push(this.data.id);
      }
    } else {
      if (right) {
        rightArr.indexOf(this.data.id) !== -
          ? rightArr.splice(rightArr.indexOf(this.data.id),)
          : "";
      }
    }
    localStorage.setItem("right", JSON.stringify(rightArr));
  }
}

/components/drag-tree/index.vue

 
<template>
  <div style="width:%; height: 100%">
    <Node
      :render-content="renderContent"
      v-for="item in root"
      :key="item._treeId"
      :data="item"
      :active-id.sync="activeId"
      :isTree="true"
    ></Node>
  </div>
</template>
 
<script lang="ts">
import index from "./index";
export default index;
</script>
 
<style scoped>
.drag {
  font-size:px;
  text-align: right;
  padding-right:px;
  cursor: pointer;
}
</style>

/components/drag-tree/index.ts

 
import { Vue, Component, Provide, Prop, Watch } from "vue-property-decorator";
import Node from "./node.vue";
import { initTree, findNearestComponent } from "./utils/utils";
 
@Component({
  name: "TreeDrag",
  components: {
    Node
  }
})
export default class index extends Vue {
 
  @Prop({ default: [] }) data?: any[]
  @Prop(Function) renderContent
  @Prop({ default: true }) isTree?: boolean
  // 是否开启拖拽
  @Prop({ default: false }) draggable?: boolean
  // 是否默认展开所有节点
  @Prop({ default: false }) defaultExpandAll?: boolean
  // 拖拽时的颜色
  @Prop({ default: "EFF" }) dragColor: string
  // 每行高度
  @Prop({ default: "px" }) lineHeight: string
  @Prop({ default: "px" }) lineFontSize: string
  @Prop({ default: "" }) iconName: string
  @Prop({
    default: () => {
      return {
        label: "label",
        children: "children",
      }
    }
  }) props: IAnyType
 
  @Provide("draggableColor")
  draggableColor = "EFF"
  @Provide("height")
  height = "px"
  @Provide("fontSize")
  fontSize = "px"
  @Provide("icon")
  icon = ""
  activeId =
  startData = {
    data: [],
    _treeId: "",
    id: ""
  } // 拖拽时被拖拽的节点
  lg = null // 拖拽经过的最后一个节点
  lg = null // 拖拽经过的最后第二个节点
  root = null // data的数据
  dragState = {
    showDropIndicator: false,
    draggingNode: null, // 拖动的节点
    dropNode: null,
    allowDrop: true,
  }
  odata = []
 
  @Watch("data", { deep: true })
  onData(nerVal) {
    this.root = initTree(nerVal, this.props, this.defaultExpandAll); // 新树
    if (this.root?.length && !this.activeId) {
      this.activeId = this.root[].id;
    }
  }
  @Watch("dragColor", { immediate: true })
  onDragColor(nerVal) {
    this.draggableColor = nerVal;
  }
  @Watch("lineHeight", { immediate: true })
  onHeight(nerVal) {
    this.height = nerVal;
  }
  @Watch("lineFontSize", { immediate: true })
  onFontSize(nerVal) {
    this.fontSize = nerVal;
  }
  @Watch("iconName", { immediate: true })
  onIconName(nerVal) {
    this.icon = nerVal;
  }
 
  created(): void {
    this.odata = this.data;
    this.root = initTree(this.data, this.props, this.defaultExpandAll); // 新树
 
    // 选择移动的元素 事件
    this.$on("node-start", (data, that, ev) => {
      this.startData = data;
      this.dragState.draggingNode = that;
      this.$emit("tree-start", that.data.data, that.data, ev);
    });
 
    // 移动事件
    this.$on("node-over", (data, that, ev) => {
      if (that.$refs.item.id != this.lg) {
        this.lg = this.lg1;
        this.lg = that.$refs.item.id;
      }
      const dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
      const oldDropNode = this.dragState.dropNode; // 上一个节点
      if (oldDropNode && oldDropNode !== dropNode) {
        // 判断节点改没改变
        oldDropNode.dropType = "none";
      }
 
      const draggingNode = this.dragState.draggingNode; // 移动的节点
      if (!draggingNode || !dropNode) return;
 
      const dropPrev = true; // 上
      const dropInner = true; // 中
      const dropNext = true; // 下
      ev.dataTransfer.dropEffect = dropInner ? "move" : "none";
      this.dragState.dropNode = dropNode;
 
      const targetPosition = dropNode.$el.getBoundingClientRect();
      const prevPercent = dropPrev
        ? dropInner
          ?.25
          : dropNext
          ?.45
          :
        : -;
      const nextPercent = dropNext
        ? dropInner
          ?.75
          : dropPrev
          ?.55
          :
        :;
      let dropType = "";
 
      const distance = ev.clientY - targetPosition.top;
      if (distance < targetPosition.height * prevPercent) {
        // 在上面
        dropType = "before";
      } else if (distance > targetPosition.height * nextPercent) {
        // 在下面
        dropType = "after";
      } else if (dropInner) {
        dropType = "inner";
      } else {
        dropType = "none";
      }
      if (this.digui(draggingNode.data, dropNode.data._treeId)) {
        dropType = "none";
      }
      dropNode.dropType = dropType;
      this.$emit("tree-over", that.data.data, that.data, ev, dropType);
    });
 
    // 移动结束 事件
    this.$on("node-drop", (data, that, ev) => {
      const sd = JSON.stringify(this.startData.data);
      const ad = JSON.stringify(this.data);
      let ss: string | string[] = ad.split(sd);
      let newData;
      ss = ss.join("");
      if (that.dropType == "none") {
        return;
      }
      if (this.lg != null && this.lg1 != this.startData._treeId) {
        // 删除startData
        ss = this.deleteStr(ss);
        const od = JSON.stringify(data.data);
        const a = ss.indexOf(od);
        if (that.dropType == "after") {
          newData = JSON.parse(
            ss.substring(, a + od.length) +
              "," +
              sd +
              ss.substring(a + od.length)
          );
        } else if (that.dropType == "before") {
          if (a == -) {
            const s = this.deleteStr(od.split(sd).join(""));
            newData = JSON.parse(
              ss.substring(, ss.indexOf(s)) +
                sd +
                "," +
                ss.substring(ss.indexOf(s))
            );
          } else {
            newData = JSON.parse(
              ss.substring(, a) + sd + "," + ss.substring(a)
            );
          }
        } else if (that.dropType == "inner") {
          ss = JSON.parse(ss);
          this.oldData(ss, data.data, JSON.parse(sd));
          newData = ss;
        }
        this.root = initTree(newData, this.props, this.defaultExpandAll); // 新树
        const parent: any = this.$parent;
        parent.data = newData;
        this.lg = null;
        this.lg = null;
      }
 
      this.$emit(
        "tree-drop",
        this.data,
        ev,
        this.startData.id,
        data.id,
        that.dropType,
        this.root
      );
      that.dropType = "none";
    });
  }
 
  /**
   * 修改data，添加输入
   * @param {Array} ss 需要被加入的数据
   * @param {Object} data 落点
   * @param {Object} sd 需要加入的数据
   */
  oldData(ss, data, sd): void {
    for (let i =; i < ss.length; i++) {
      if (JSON.stringify(ss[i]) == JSON.stringify(data)) {
        if ("children" in ss[i]) {
          ss[i].children.push(sd);
        } else {
          ss[i].children = [];
          ss[i].children.push(sd);
        }
        break;
      } else if ("children" in ss[i]) {
        this.oldData(ss[i].children, data, sd);
      }
    }
  }
  // 判断拖拽时贴近的是不是自己的子元素
  digui(data, id): boolean {
    if (data.children && data.children.length !=) {
      for (let i =; i < data.children.length; i++) {
        if (data.children[i]._treeId == id) {
          return true;
        }
        const s = this.digui(data.children[i], id);
        if (s == true) {
          return true;
        }
      }
    }
  }
  deleteStr(ss): string {
    if (ss.indexOf(",,") !== -) {
      ss = ss.split(",,");
      if (ss.length !==) {
        ss = ss.join(",");
      }
    } else if (ss.indexOf("[,") !== -) {
      ss = ss.split("[,");
      if (ss.length !==) {
        ss = ss.join("[");
      }
    } else if (ss.indexOf(",]") !== -) {
      ss = ss.split(",]");
      if (ss.length !==) {
        ss = ss.join("]");
      }
    }
    return ss;
  }
}

	let _treeId =;
	/**
	* 初始化树
	* @param {Array} tree 树的原始结构
	* @param {Object} props 树的字段值
	* @param {Boolean} defaultExpandAll 是否展开节点
	*/
	function initTree(tree, props, defaultExpandAll: boolean) {
	let right = localStorage.getItem("right");
	right = JSON.parse(right);
	return initTreed(tree,, props, defaultExpandAll, [], right);
	}
	/**
	* 初始化树
	* @param {Array} tree 树的原始结构
	* @param {Number} layer 层级
	* @param {Object} props 树的字段值
	* @param {Boolean} defaultExpandAll 是否展开节点
	* @param {Array} props 新树
	* @param {Array} right 判断节点展不展开
	*/
	function initTreed(tree, layer, props, defaultExpandAll, newTree, right) {
	for (let i =; i < tree.length; i++) {
	let obj {};
	for (const item in tree[i]) {
	if (item === props.label) {
	obj.label = tree[i][item];
	} else if (item === props.id) {
	obj.id = tree[i][item];
	} else if (item === props.children && tree[i][props.children].length) {
	obj.children = [];
	} else {
	obj[item] = tree[i][item];
	if (item === "children") {
	delete obj.children
	}
	}
	}
	if (right) {
	right.indexOf(obj.id) !== - ?
	(obj.defaultExpandAll = true) :
	(obj.defaultExpandAll = false);
	} else {
	obj.defaultExpandAll = defaultExpandAll;
	}

	obj._treeId = _treeId++;
	obj.layer = layer;
	obj.data = JSON.parse(JSON.stringify(tree[i]));
	newTree.push(obj);
	if ("children" in obj) {
	initTreed(
	tree[i][props.children],
	layer +,
	props,
	defaultExpandAll,
	newTree[i].children,
	right
	);
	}
	obj = {};
	}
	return newTree;
	}

	/**
	*
	* @param {Array} tree 树
	* @param {Number} layer 层级
	* @returns
	*/
	function draggableTree(tree: IAnyType[], layer) {
	for (let i =; i < tree.length; i++) {
	tree[i].layer = layer;
	if ("children" in tree[i]) {
	draggableTree(tree[i].children, layer +);
	}
	}
	return tree;
	}
	/**
	* 寻找
	*/
	function findNearestComponent(element, componentName) {
	let target = element;
	while (target && target.tagName !== "BODY") {
	if (target.__vue__ && target.__vue__.$options.name === componentName) {
	return target.__vue__;
	}
	target = target.parentNode;
	}
	return null;
	}
	export {
	initTree,
	draggableTree,
	findNearestComponent
	};

	<template>
	<div
	class="drag-tree item"
	:draggable="tree.draggable"
	@dragstart.stop="dragstart"
	@dragover.stop="dragover"
	@drop.stop="drop"
	@contextmenu="($event) => this.handleContextMenu($event)"
	ref="item"
	:id="data._treeId"
	>
	<!-- 每一行 -->
	<div
	style="height:px"
	:style="{ background: dropType == 'before' ? `#${draggableColor}` : '' }"
	></div>
	<div
	@click="itemClick($event, data)"
	:class="['text', active === data.id ? 'is-current' : '']"
	:style="{
	height: height,
	lineHeight: height,
	fontSize: fontSize,
	position: 'relative',
	margin: ' auto',
	}"
	>
	<span
	:style="{
	display: 'inline-block',
	width: (data.layer -) * 18 + 'px',
	}"
	></span>
	<img
	:class="[data.defaultExpandAll ? 'iconBottom' : 'iconRight']"
	v-show="data.children && data.children.length !=="
	:src="iconImg"
	:style="{
	width: fontSize,
	height: fontSize,
	display: 'inline-block',
	verticalAlign: 'middle',
	marginRight: 'px',
	}"
	alt=""
	/>
	<span
	v-show="!data.children \|\| data.children.length =="
	:style="{
	width: fontSize,
	height: fontSize,
	display: 'inline-block',
	verticalAlign: 'middle',
	marginRight: 'px',
	}"
	></span>
	<img
	v-if="data.TreeImg"
	:src="dataImg"
	:style="{
	width: fontSize,
	height: fontSize +,
	display: 'inline-block',
	verticalAlign: 'middle',
	marginRight: 'px',
	}"
	/>
	<span
	:style="{
	background: dropType == 'inner' ? `#${draggableColor}` : '',
	height: fontSize +,
	color: dropType == 'inner' ? '#fff' : '#d90b2',
	overflow: 'hidden',
	}"
	>{{ data.label }}{{ data.isCurrent }}</span
	>
	<node-content :node="data"></node-content>
	</div>
	<div
	style="height:px"
	:style="{ background: dropType == 'after' ? `#${draggableColor}` : '' }"
	></div>
	<div
	v-if="data.children && data.children.length !="
	:class="[data.defaultExpandAll ? 'sonShow' : 'sonVanish', 'son']"
	>
	<my-node
	v-for="item in data.children"
	:key="item._treeId"
	:render-content="renderContent"
	:data="item"
	:active-id.sync="active"
	></my-node>
	</div>
	</div>
	</template>

	<script>
	import { findNearestComponent } from "./utils/utils.ts";
	export default {
	name: "MyNode",
	props: {
	data: {
	// 接收的数据
	type: Object,
	},
	activeId: {
	type: [Number, String]
	},
	renderContent: Function,
	},
	components: {
	NodeContent: {
	props: {
	node: {
	required: true
	}
	},
	render(h) {
	const parent = this.$parent;
	const tree = parent.tree;
	const node = this.node;
	const { data, store } = node;
	return (
	parent.renderContent
	? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
	: tree.$scopedSlots.default
	? tree.$scopedSlots.default({ node, data })
	: ''
	);
	}
	}
	},
	inject: ["draggableColor", "height", "fontSize", "icon"],
	data() {
	return {
	curNode: null,
	tree: "", // 最上一级
	dropType: "none",
	iconImg: "",
	dataImg: "",
	};
	},
	computed: {
	active: {
	set (val) {
	this.$emit("update:activeId", val);
	},
	get () {
	return this.activeId;
	}
	}
	},
	created() {
	let parent = this.$parent;
	if (parent.isTree) {
	this.tree = parent;
	} else {
	this.tree = parent.tree;
	}
	// console.log(this.$parent)
	// console.log(this.tree)
	// console.log(parent)
	// console.log(parent.isTree)
	// console.log(parent.tree)
	// 有没有自定义icon
	if (this.icon.length !=) {
	let s = this.icon.slice(, 2);
	let url = this.icon.slice();
	if (s == "@/") {
	this.iconImg = require(`@/${url}`);
	} else {
	this.iconImg = this.icon;
	}
	} else {
	this.iconImg = require("@/assets/images/business/tree/right.png");
	}
	if (this.data.TreeImg) {
	let s = this.data.TreeImg.slice(, 2);
	let url = this.data.TreeImg.slice();
	if (s == "@/") {
	this.dataImg = require(`@/${url}`);
	} else {
	this.dataImg = this.data.TreeImg;
	}
	}
	},
	mounted() {
	document.body.addEventListener('click', this.closeMenu);
	},
	destroyed() {
	document.body.removeEventListener('click', this.closeMenu);
	},
	methods: {
	closeMenu() {
	this.tree.$emit('close-menu');
	},
	handleContextMenu(event) {
	if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length >) {
	event.stopPropagation();
	event.preventDefault();
	}
	this.tree.$emit('node-contextmenu', event, this.data, this);
	},
	// 选择要滑动的元素
	dragstart(ev) {
	if (!this.tree.draggable) return;
	this.tree.$emit("node-start", this.data, this, ev);
	},
	// 滑动中
	dragover(ev) {
	if (!this.tree.draggable) return;
	ev.preventDefault();
	this.tree.$emit("node-over", this.data, this, ev);
	},
	// 滑动结束
	drop(ev) {
	if (!this.tree.draggable) return;
	this.tree.$emit("node-drop", this.data, this, ev);
	},
	// 行点击事件
	itemClick(ev, data) {
	let dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
	this.active = data.id;
	this.data.defaultExpandAll = !this.data.defaultExpandAll; // 改变树的伸缩状态
	this.tree.$emit("tree-click", this.data, dropNode);
	let right = localStorage.getItem("right");
	if (this.data.defaultExpandAll === true) {
	if (right) {
	right = JSON.parse(right);
	right.push(this.data.id);
	} else {
	right = [];
	right.push(this.data.id);
	}
	} else {
	if (right) {
	right = JSON.parse(right);
	right.indexOf(this.data.id) !== -
	? right.splice(right.indexOf(this.data.id),)
	: "";
	}
	}
	localStorage.setItem("right", JSON.stringify(right));
	},
	},
	};
	</script>

	<style lang="less">
	.drag-tree {
	.text {
	color: #d90b2;
	font-size:px;
	height:px;
	line-height:px;
	cursor: pointer;
	&.is-current {
	background: #ff7fa;
	}
	}
	.text:hover {
	background: #ff7fa;
	}
	.iconBottom {
	transition:.3s;
	transform: rotate(deg);
	}
	.iconRight {
	transition:.3s;
	transform: rotate(deg);
	}
	.son {
	max-height:px;
	overflow: hidden;
	transition:.3s max-height;
	}
	.sonVanish {
	max-height:px;
	}
	.sonShow {
	max-height:px;
	}
	&-popover {
	width:px;
	height: auto;
	position: fixed;
	background: #fff;
	border:px solid #ddd;
	box-shadow: 1px 6px rgba(54, 54, 54, 0.2);
	z-index:;
	border-radius:px;
	&-item {
	color: #a6e;
	line-height:px;
	text-align: center;
	cursor: pointer;
	transition: background .s ease-in-out;
	&:hover, &:active {
	background: #ff3f3;
	}
	}
	}
	}
	</style>

	<template>
	<div style="width:%; height: 100%">
	<Node
	:render-content="renderContent"
	v-for="item in root"
	:key="item._treeId"
	:data="item"
	:active-id.sync="activeId"
	:isTree="true"
	></Node>
	</div>
	</template>

	<script>
	import Node from "./node.vue";
	import { initTree, findNearestComponent } from "./utils/utils.ts";
	export default {
	name: "TreeDrag",
	components: {
	Node,
	},
	provide() {
	return {
	draggableColor: this.draggableColor,
	height: this.height,
	fontSize: this.fontSize,
	icon: this.icon,
	};
	},
	props: {
	data: {
	type: Array,
	},
	renderContent: Function,
	draggable: {
	// 是否开启拖拽
	type: Boolean,
	default: false,
	},
	defaultExpandAll: {
	// 是否默认展开所有节点
	type: Boolean,
	default: false,
	},
	draggableColor: {
	// 拖拽时的颜色
	type: String,
	default: "EFF",
	},
	height: {
	// 每行高度
	type: String,
	default: "px",
	},
	fontSize: {
	type: String,
	default: "px",
	},
	icon: {
	type: String,
	default: "",
	},
	props: {
	type: Object,
	default() {
	return {
	label: "label",
	children: "children",
	};
	},
	},
	},
	watch: {
	data(nerVal) {
	this.root = initTree(nerVal, this.props, this.defaultExpandAll); // 新树
	if (this.root?.length && !this.activeId) {
	this.activeId = this.root[].id;
	}
	},
	deep: true
	},
	data() {
	return {
	activeId:,
	startData: {}, // 拖拽时被拖拽的节点
	lg: null, // 拖拽经过的最后一个节点
	lg: null, // 拖拽经过的最后第二个节点
	root: null, // data的数据
	dragState: {
	showDropIndicator: false,
	draggingNode: null, // 拖动的节点
	dropNode: null,
	allowDrop: true,
	},
	odata: "",
	};
	},
	created() {
	this.odata = this.data;
	this.isTree = true; // 这是最高级
	this.root = initTree(this.data, this.props, this.defaultExpandAll); // 新树

	// 选择移动的元素事件
	this.$on("node-start", (data, that, ev) => {
	this.startData = data;
	this.dragState.draggingNode = that;
	this.$emit("tree-start", that.data.data, that.data, ev);
	});

	// 移动事件
	this.$on("node-over", (data, that, ev) => {
	console.log()
	console.log(ev.target)
	if (that.$refs.item.id != this.lg) {
	this.lg = this.lg1;
	this.lg = that.$refs.item.id;
	}
	let dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
	const oldDropNode = this.dragState.dropNode; // 上一个节点
	if (oldDropNode && oldDropNode !== dropNode) {
	// 判断节点改没改变
	oldDropNode.dropType = "none";
	}

	const draggingNode = this.dragState.draggingNode; // 移动的节点
	console.log(draggingNode)
	console.log(dropNode)
	console.log(this.dragState)
	if (!draggingNode \|\| !dropNode) return;

	console.log()
	let dropPrev = true; // 上
	let dropInner = true; // 中
	let dropNext = true; // 下
	ev.dataTransfer.dropEffect = dropInner ? "move" : "none";
	this.dragState.dropNode = dropNode;

	const targetPosition = dropNode.$el.getBoundingClientRect();
	const prevPercent = dropPrev
	? dropInner
	?.25
	: dropNext
	?.45
	:
	: -;
	const nextPercent = dropNext
	? dropInner
	?.75
	: dropPrev
	?.55
	:
	:;
	var dropType = "";

	const distance = ev.clientY - targetPosition.top;
	if (distance < targetPosition.height * prevPercent) {
	// 在上面
	dropType = "before";
	} else if (distance > targetPosition.height * nextPercent) {
	// 在下面
	dropType = "after";
	} else if (dropInner) {
	dropType = "inner";
	} else {
	dropType = "none";
	}
	if (this.digui(draggingNode.data, dropNode.data._treeId)) {
	dropType = "none";
	}
	dropNode.dropType = dropType;
	console.log()
	console.log(dropType)
	this.$emit("tree-over", that.data.data, that.data, ev, dropType);
	});

	// 移动结束事件
	this.$on("node-drop", (data, that, ev) => {
	console.log(data, that, ev)
	console.log(this.startData)
	let sd = JSON.stringify(this.startData.data);
	let ad = JSON.stringify(this.data);
	let ss = ad.split(sd);
	let newData;
	ss = ss.join("");
	console.log(that.dropType)
	if (that.dropType == "none") {
	return;
	}
	console.log(that.dropType)
	if (this.lg != null && this.lg1 != this.startData._treeId) {
	// 删除startData
	ss = this.deleteStr(ss);
	let od = JSON.stringify(data.data);
	let a = ss.indexOf(od);
	console.log(newData)
	if (that.dropType == "after") {
	newData = JSON.parse(
	ss.substring(, a + od.length) +
	"," +
	sd +
	ss.substring(a + od.length)
	);
	} else if (that.dropType == "before") {
	if (a == -) {
	let s = this.deleteStr(od.split(sd).join(""));
	newData = JSON.parse(
	ss.substring(, ss.indexOf(s)) +
	sd +
	"," +
	ss.substring(ss.indexOf(s))
	);
	} else {
	newData = JSON.parse(
	ss.substring(, a) + sd + "," + ss.substring(a)
	);
	}
	} else if (that.dropType == "inner") {
	ss = JSON.parse(ss);
	this.oldData(ss, data.data, JSON.parse(sd));
	newData = ss;
	}
	console.log(newData)
	this.root = initTree(newData, this.props, this.defaultExpandAll); // 新树
	this.$parent.data = newData;
	this.lg = null;
	this.lg = null;
	}

	this.$emit(
	"tree-drop",
	this.data.data,
	this.data,
	ev,
	this.startData.id,
	data.id,
	that.dropType,
	this.root
	);
	that.dropType = "none";
	});
	},
	methods: {
	/**
	* 修改data，添加输入
	* @param {Array} ss 需要被加入的数据
	* @param {Object} data 落点
	* @param {Object} sd 需要加入的数据
	*/
	oldData(ss, data, sd) {
	for (let i =; i < ss.length; i++) {
	if (JSON.stringify(ss[i]) == JSON.stringify(data)) {
	if ("children" in ss[i]) {
	ss[i].children.push(sd);
	} else {
	ss[i].children = [];
	ss[i].children.push(sd);
	}
	break;
	} else if ("children" in ss[i]) {
	this.oldData(ss[i].children, data, sd);
	}
	}
	},
	// 判断拖拽时贴近的是不是自己的子元素
	digui(data, id) {
	if (data.children && data.children.length !=) {
	for (let i =; i < data.children.length; i++) {
	if (data.children[i]._treeId == id) {
	return true;
	}
	let s = this.digui(data.children[i], id);
	if (s == true) {
	return true;
	}
	}
	}
	},
	deleteStr(ss) {
	if (ss.indexOf(",,") !== -) {
	ss = ss.split(",,");
	if (ss.length !==) {
	ss = ss.join(",");
	}
	} else if (ss.indexOf("[,") !== -) {
	ss = ss.split("[,");
	if (ss.length !==) {
	ss = ss.join("[");
	}
	} else if (ss.indexOf(",]") !== -) {
	ss = ss.split(",]");
	if (ss.length !==) {
	ss = ss.join("]");
	}
	}
	return ss;
	},
	},
	};
	</script>

	<style scoped>
	.drag {
	font-size:px;
	text-align: right;
	padding-right:px;
	cursor: pointer;
	}
	</style>

	<template>
	<div style="width:%; height: 100%;">
	<tree-drag
	ref="dragTree"
	@node-contextmenu="handleContextMenu"
	@tree-click="treeClick"
	@tree-drop="treeDrop"
	@close-menu="closeMenu"
	:data="data"
	:props="defaultProps"
	:draggable="true"
	>
	</tree-drag>
	<div class="drag-tree-popover" :style="style" v-if="isShowPopover">
	<div
	class="drag-tree-popover-item"
	v-for="(item, index) in popoverList"
	:key="index"
	@click="menuClick(item)"
	>
	<i class="iconfont" :class="'icon-' + item.type"></i>
	{{ item.name }}
	</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	name: "Test",
	data() {
	return {
	parent_id: "",
	data: [],
	defaultProps: {
	children: "children",
	label: "name",
	},
	popoverLeft:, // 距离左边的距离
	popoverTop:, // 距离顶部的距离
	isShowPopover: false, // 是否展示右键内容
	popoverList: [
	{ name: "新增", type: "xinzeng" },
	{ name: "编辑", type: "bianji" },
	{ name: "删除", type: "shanchu" },
	],
	treeNode: null,
	activeId:,
	};
	},
	created() {
	this.getTreeData();
	},
	computed: {
	// 计算出距离
	style() {
	return {
	left: this.popoverLeft + "px",
	top: this.popoverTop + "px",
	};
	},
	},
	methods: {
	// 显示自定义菜单
	handleContextMenu(event, node, that) {
	this.popoverLeft = event.clientX +;
	this.popoverTop = event.clientY;
	this.isShowPopover = true;
	},
	// 关闭菜单
	closeMenu() {
	this.isShowPopover = false;
	},
	treeClick(data) {
	this.activeId = data.id;
	},
	treeDrop(node, data, ev, startId, targetId, dropType, root) {
	console.log(startId, targetId, dropType, root);
	},
	// 菜单某一项被点击
	menuClick(item) {
	// 操作
	this.closeMenu();
	},
	// 判断activeId是否存在
	findIdIsExit(data, id) {
	if (data && data.length) {
	for (let i =; i < data.length; i++) {
	if (data[i].id == id) {
	return true;
	}
	if (data[i].children && data[i].children.length) {
	let s = this.findIdIsExit(data[i].children, id);
	if (s === true) {
	return true;
	}
	}
	}
	}
	},
	async getTreeData() {
	let res = await this.$service.invoke({});
	this.data = res?.result ? res.result : [];
	this.activeId = this.data[].id;
	this.$refs.dragTree.activeId = this.activeId;
	},
	},
	};
	</script>

	import { Vue, Component, Prop, PropSync, Inject } from "vue-property-decorator";
	import { findNearestComponent } from "./utils/utils";
	@Component({
	name: "MyNode",
	components: {
	NodeContent: {
	props: {
	node: {
	required: true
	}
	},
	render(h) {
	const parent = this.$parent;
	const tree = parent.tree;
	const node = this.node;
	const { data, store } = node;
	return (
	parent.renderContent
	? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
	: tree.$scopedSlots.default
	? tree.$scopedSlots.default({ node, data })
	: ''
	);
	}
	}
	}
	})
	export default class node extends Vue {
	@Prop() data: IAnyType
	@PropSync("activeId", { type: [Number, String] }) active!: string \| number
	@Prop(Function) renderContent

	@Inject("draggableColor") readonly draggableColor!: string
	@Inject("height") readonly height!: string
	@Inject("fontSize") readonly fontSize!: string
	@Inject("icon") readonly icon!: string

	curNode = null
	tree: IAnyType // 最上一级
	dropType = "none"
	iconImg = ""
	dataImg = ""

	created(): void {
	const parent: any = this.$parent;
	if (parent.isTree) {
	this.tree = parent;
	} else {
	this.tree = parent.tree;
	}
	// 有没有自定义icon
	if (this.icon.length !=) {
	const s = this.icon.slice(, 2);
	const url = this.icon.slice();
	if (s == "@/") {
	this.iconImg = require(`@/${url}`);
	} else {
	this.iconImg = this.icon;
	}
	} else {
	this.iconImg = require("@/assets/images/business/tree/right.png");
	}
	if (this.data.TreeImg) {
	const s = this.data.TreeImg.slice(, 2);
	const url = this.data.TreeImg.slice();
	if (s == "@/") {
	this.dataImg = require(`@/${url}`);
	} else {
	this.dataImg = this.data.TreeImg;
	}
	}
	}
	mounted(): void {
	document.body.addEventListener("click", this.closeMenu);
	}
	destroyed(): void {
	document.body.removeEventListener("click", this.closeMenu);
	}
	closeMenu(): void {
	this.tree.$emit("close-menu");
	}
	handleContextMenu(event: DragEvent): void {
	if (this.tree._events["node-contextmenu"] && this.tree._events["node-contextmenu"].length >) {
	event.stopPropagation();
	event.preventDefault();
	}
	this.tree.$emit("node-contextmenu", event, this.data, this);
	}
	// 选择要滑动的元素
	dragstart(ev: DragEvent): void {
	if (!this.tree.draggable) return;
	this.tree.$emit("node-start", this.data, this, ev);
	}
	// 滑动中
	dragover(ev: DragEvent): void {
	if (!this.tree.draggable) return;
	ev.preventDefault();
	this.tree.$emit("node-over", this.data, this, ev);
	}
	// 滑动结束
	drop(ev: DragEvent): void {
	if (!this.tree.draggable) return;
	this.tree.$emit("node-drop", this.data, this, ev);
	}
	// 行点击事件
	itemClick(ev: DragEvent, data: IAnyType): void {
	const dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
	this.active = data.id;
	this.data.defaultExpandAll = !this.data.defaultExpandAll; // 改变树的伸缩状态
	this.tree.$emit("tree-click", this.data, dropNode);
	const right: string = localStorage.getItem("right");
	let rightArr: IAnyType[];
	if (right) {
	rightArr = JSON.parse(right);
	}
	if (this.data.defaultExpandAll === true) {
	if (right) {
	rightArr.push(this.data.id);
	} else {
	rightArr = [];
	rightArr.push(this.data.id);
	}
	} else {
	if (right) {
	rightArr.indexOf(this.data.id) !== -
	? rightArr.splice(rightArr.indexOf(this.data.id),)
	: "";
	}
	}
	localStorage.setItem("right", JSON.stringify(rightArr));
	}
	}

	import { Vue, Component, Provide, Prop, Watch } from "vue-property-decorator";
	import Node from "./node.vue";
	import { initTree, findNearestComponent } from "./utils/utils";

	@Component({
	name: "TreeDrag",
	components: {
	Node
	}
	})
	export default class index extends Vue {

	@Prop({ default: [] }) data?: any[]
	@Prop(Function) renderContent
	@Prop({ default: true }) isTree?: boolean
	// 是否开启拖拽
	@Prop({ default: false }) draggable?: boolean
	// 是否默认展开所有节点
	@Prop({ default: false }) defaultExpandAll?: boolean
	// 拖拽时的颜色
	@Prop({ default: "EFF" }) dragColor: string
	// 每行高度
	@Prop({ default: "px" }) lineHeight: string
	@Prop({ default: "px" }) lineFontSize: string
	@Prop({ default: "" }) iconName: string
	@Prop({
	default: () => {
	return {
	label: "label",
	children: "children",
	}
	}
	}) props: IAnyType

	@Provide("draggableColor")
	draggableColor = "EFF"
	@Provide("height")
	height = "px"
	@Provide("fontSize")
	fontSize = "px"
	@Provide("icon")
	icon = ""
	activeId =
	startData = {
	data: [],
	_treeId: "",
	id: ""
	} // 拖拽时被拖拽的节点
	lg = null // 拖拽经过的最后一个节点
	lg = null // 拖拽经过的最后第二个节点
	root = null // data的数据
	dragState = {
	showDropIndicator: false,
	draggingNode: null, // 拖动的节点
	dropNode: null,
	allowDrop: true,
	}
	odata = []

	@Watch("data", { deep: true })
	onData(nerVal) {
	this.root = initTree(nerVal, this.props, this.defaultExpandAll); // 新树
	if (this.root?.length && !this.activeId) {
	this.activeId = this.root[].id;
	}
	}
	@Watch("dragColor", { immediate: true })
	onDragColor(nerVal) {
	this.draggableColor = nerVal;
	}
	@Watch("lineHeight", { immediate: true })
	onHeight(nerVal) {
	this.height = nerVal;
	}
	@Watch("lineFontSize", { immediate: true })
	onFontSize(nerVal) {
	this.fontSize = nerVal;
	}
	@Watch("iconName", { immediate: true })
	onIconName(nerVal) {
	this.icon = nerVal;
	}

	created(): void {
	this.odata = this.data;
	this.root = initTree(this.data, this.props, this.defaultExpandAll); // 新树

	// 选择移动的元素事件
	this.$on("node-start", (data, that, ev) => {
	this.startData = data;
	this.dragState.draggingNode = that;
	this.$emit("tree-start", that.data.data, that.data, ev);
	});

	// 移动事件
	this.$on("node-over", (data, that, ev) => {
	if (that.$refs.item.id != this.lg) {
	this.lg = this.lg1;
	this.lg = that.$refs.item.id;
	}
	const dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
	const oldDropNode = this.dragState.dropNode; // 上一个节点
	if (oldDropNode && oldDropNode !== dropNode) {
	// 判断节点改没改变
	oldDropNode.dropType = "none";
	}

	const draggingNode = this.dragState.draggingNode; // 移动的节点
	if (!draggingNode \|\| !dropNode) return;

	const dropPrev = true; // 上
	const dropInner = true; // 中
	const dropNext = true; // 下
	ev.dataTransfer.dropEffect = dropInner ? "move" : "none";
	this.dragState.dropNode = dropNode;

	const targetPosition = dropNode.$el.getBoundingClientRect();
	const prevPercent = dropPrev
	? dropInner
	?.25
	: dropNext
	?.45
	:
	: -;
	const nextPercent = dropNext
	? dropInner
	?.75
	: dropPrev
	?.55
	:
	:;
	let dropType = "";

	const distance = ev.clientY - targetPosition.top;
	if (distance < targetPosition.height * prevPercent) {
	// 在上面
	dropType = "before";
	} else if (distance > targetPosition.height * nextPercent) {
	// 在下面
	dropType = "after";
	} else if (dropInner) {
	dropType = "inner";
	} else {
	dropType = "none";
	}
	if (this.digui(draggingNode.data, dropNode.data._treeId)) {
	dropType = "none";
	}
	dropNode.dropType = dropType;
	this.$emit("tree-over", that.data.data, that.data, ev, dropType);
	});

	// 移动结束事件
	this.$on("node-drop", (data, that, ev) => {
	const sd = JSON.stringify(this.startData.data);
	const ad = JSON.stringify(this.data);
	let ss: string \| string[] = ad.split(sd);
	let newData;
	ss = ss.join("");
	if (that.dropType == "none") {
	return;
	}
	if (this.lg != null && this.lg1 != this.startData._treeId) {
	// 删除startData
	ss = this.deleteStr(ss);
	const od = JSON.stringify(data.data);
	const a = ss.indexOf(od);
	if (that.dropType == "after") {
	newData = JSON.parse(
	ss.substring(, a + od.length) +
	"," +
	sd +
	ss.substring(a + od.length)
	);
	} else if (that.dropType == "before") {
	if (a == -) {
	const s = this.deleteStr(od.split(sd).join(""));
	newData = JSON.parse(
	ss.substring(, ss.indexOf(s)) +
	sd +
	"," +
	ss.substring(ss.indexOf(s))
	);
	} else {
	newData = JSON.parse(
	ss.substring(, a) + sd + "," + ss.substring(a)
	);
	}
	} else if (that.dropType == "inner") {
	ss = JSON.parse(ss);
	this.oldData(ss, data.data, JSON.parse(sd));
	newData = ss;
	}
	this.root = initTree(newData, this.props, this.defaultExpandAll); // 新树
	const parent: any = this.$parent;
	parent.data = newData;
	this.lg = null;
	this.lg = null;
	}

	this.$emit(
	"tree-drop",
	this.data,
	ev,
	this.startData.id,
	data.id,
	that.dropType,
	this.root
	);
	that.dropType = "none";
	});
	}

	/**
	* 修改data，添加输入
	* @param {Array} ss 需要被加入的数据
	* @param {Object} data 落点
	* @param {Object} sd 需要加入的数据
	*/
	oldData(ss, data, sd): void {
	for (let i =; i < ss.length; i++) {
	if (JSON.stringify(ss[i]) == JSON.stringify(data)) {
	if ("children" in ss[i]) {
	ss[i].children.push(sd);
	} else {
	ss[i].children = [];
	ss[i].children.push(sd);
	}
	break;
	} else if ("children" in ss[i]) {
	this.oldData(ss[i].children, data, sd);
	}
	}
	}
	// 判断拖拽时贴近的是不是自己的子元素
	digui(data, id): boolean {
	if (data.children && data.children.length !=) {
	for (let i =; i < data.children.length; i++) {
	if (data.children[i]._treeId == id) {
	return true;
	}
	const s = this.digui(data.children[i], id);
	if (s == true) {
	return true;
	}
	}
	}
	}
	deleteStr(ss): string {
	if (ss.indexOf(",,") !== -) {
	ss = ss.split(",,");
	if (ss.length !==) {
	ss = ss.join(",");
	}
	} else if (ss.indexOf("[,") !== -) {
	ss = ss.split("[,");
	if (ss.length !==) {
	ss = ss.join("[");
	}
	} else if (ss.indexOf(",]") !== -) {
	ss = ss.split(",]");
	if (ss.length !==) {
	ss = ss.join("]");
	}
	}
	return ss;
	}
	}

使用vue自定义如何实现Tree组件和拖拽功能

目录

vue自定义实现Tree组件和拖拽功能

vue2 + js版

vue2 + ts 版