vue Ant Design 树形控件拖动限制

Posted 2020-11-24 yzyh

<template>
  <a-tree
    class="draggable-tree"
    draggable
    @drop="onDrop"
    @select="handleSelected"
    @expand="onExpand"
    :expandedKeys="expandedKeys"
    :treeData="gData"
  />
</template>

<script>
const x = 3;
const y = 2;
const z = 1;
const gData = [];

// 做一个假数据
const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || "0";
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);
export default {
  data() {
    return {
      gData,
      expandedKeys: [],
      datas: [] // 暂存的自己及父级的id 层级数组 例如：[爷爷级Id, 父级Id, 自己Id]
    };
  },
  methods: {
    // 递归 获得自己的层级id数组
    getItemAndParentsIdArr(arr, key) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].key === key) {
          this.datas.push(arr[i]);
          return true;
        } else {
          if (
            arr[i].children &&
            this.getItemAndParentsIdArr(arr[i].children, key)
          ) {
            this.datas.push(arr[i]);
            return true;
          }
        }
      }
    },
    // 获得自己的父级id
    getFirstParentId(strings, key) {
      let stringsArr = strings.split("/");
      let index = stringsArr.indexOf(key.toString());
      let parenId;
      if (index !== 0) {
        parenId = stringsArr[index - 1];
      } else {
        parenId = stringsArr[index];
      }
      return parenId;
    },
    // 点击文字触发
    handleSelected(keys, info) {
      console.log("点击文字:", info.node.eventKey);
      let itemKey = info.node.eventKey;
      if (this.expandedKeys.length > 0) {
        if (this.expandedKeys.includes(itemKey)) {
          this.expandedKeys.splice(this.expandedKeys.indexOf(itemKey), 1);
        } else {
          this.expandedKeys = [...this.expandedKeys, itemKey];
        }
      } else {
        this.expandedKeys = [itemKey];
      }
    },
    // 点击图标触发
    onExpand(info) {
      console.log("点击图标:", info);
      this.expandedKeys = info;
    },
    // 拖动完成触发
    onDrop(info) {
      console.log("拖动完成:", info);
      const dropKey = info.node.eventKey; // 目标节点的id
      const dragKey = info.dragNode.eventKey; // 拖拽节点的id
      const dropPos = info.node.pos.split("-");
      const dropPosition =
        info.dropPosition - Number(dropPos[dropPos.length - 1]);
      const loop = (data, key, callback) => {
        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 = [...this.gData];

      // Find dragObject
      let dragObj;

      // 如果拖动到内部
      if (!info.dropToGap) {
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
      } else {
        // 获得拖拽节点的层级id数组 this.datas
        this.getItemAndParentsIdArr(data, dragKey);
        let dragKeyString = this.datas
          .reverse()
          .map((v, i) => {
            return v.key;
          })
          .join("/");

        // 拖拽节点父级id
        let dragKeyParentId = this.getFirstParentId(dragKeyString, dragKey);
        /**
         * --------------------------------分割线---------------------------------------
         */
        // 获得目标节点的层级id数组 this.datas
        this.getItemAndParentsIdArr(data, dropKey);
        let dropKeyString = this.datas
          .reverse()
          .map((v, i) => {
            return v.key;
          })
          .join("/");

        // 目标节点父级id
        let dropKeyParentId = this.getFirstParentId(dropKeyString, dropKey);
        /**
         * --------------------------------分割线---------------------------------------
         */
        // 只允许在同父级id下进行拖动
        if (dragKeyParentId === dropKeyParentId) {
          loop(data, dragKey, (item, index, arr) => {
            arr.splice(index, 1);
            dragObj = item;
          });
          let ar;
          let i;
          loop(data, dropKey, (item, index, arr) => {
            ar = arr;
            i = index;
          });
          if (dropPosition === -1) {
            ar.splice(i, 0, dragObj);
          } else {
            ar.splice(i + 1, 0, dragObj);
          }
          this.gData = data;
        }
      }
    }
  }
};
</script>