arco-design / arco-design-vue

A Vue.js 3 UI Library based on Arco Design
https://arco.design/vue
MIT License
2.59k stars 500 forks source link

Tree组件的平级拖拽怎们实现? #3150

Closed Halecoder closed 1 month ago

Halecoder commented 1 month ago

Basic Info

Halecoder commented 1 month ago
// 同级拖拽功能
const onDrop = (info: any) => {
  const { dragNode, dropNode, dropPosition } = info;
  const data = treeData.value;
  const loop = (data: any, key: any, callback: any) => {
    data.some((item: any, index: any, arr: any) => {
      if (item.key === key) {
        callback(item, index, arr);
        return true;
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
      return false;
    });
  };
  if (!dropNode.isLeaf && dragNode.isLeaf) {
    // 子不能同级下拖拽成父
    if (dropPosition === 1 || dropPosition === -1) {
      $message.warning("只能允许同级拖拽!");
      return false;
    } else {
      // 可以拖拽为子集
      loop(data, dragNode.key, (_: any, index: any, arr: any) => {
        arr.splice(index, 1);
      });
      loop(data, dropNode.key, (item: any) => {
        item.children = item.children || [];
        item.children.push(dragNode);
      });
      return true;
    }
  } else if (dropNode.isLeaf && !dragNode.isLeaf) {
    // 父永远不能拖拽到子的任何位置
    $message.warning("只能允许同级拖拽!");
    return false;
  } else if (dropPosition === 0 && dropNode.isLeaf == dragNode.isLeaf) {
    // 同级节点不能成为子集 自动修正拖拽到平级之下
    // $message.warning("只能允许同级拖拽!");
    loop(data, dragNode.key, (_: any, index: any, arr: any) => {
      arr.splice(index, 1);
    });
    loop(data, dropNode.key, (_: any, index: any, arr: any) => {
      arr.splice(index + 1, 0, dragNode);
    });
    return false;
  } else {
    loop(data, dragNode.key, (_: any, index: any, arr: any) => {
      arr.splice(index, 1);
    });
    loop(data, dropNode.key, (_: any, index: any, arr: any) => {
      arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
    });
  }
};

就实现了只有两级的功能,对我的项目够用了