Angular中ng-zorro组件的树节点拖拽排序

目录

一、ng-zorro中的tree树形控件

一、ng-zorro中的tree树形控件

：drop前二次校验,允许用户自行决定是否允许放置 接受的类型是可观察对象

  nodesIfy = {onBefore: (arg: NzFormatBeforeDropEvent) => {//arg中dragNode为当前拖拽节点 node为目标节点  pos 为 -1时在目标节点的前面 0 目标节点的内部 1 目标节点的后面const { node, dragNode } = arg;//只允许同级前后移动不在目标节点内部 且移动节点和目标节点父节点一样 且level树节点级别一样if (arg.pos !== 0 && node.parentNode?.key === dragNode.parentNode?.key && node.level === dragNode.level) {const childList = dragNode.getParentNode()?.getChildren() || [];//当前拖拽节点位于的索引值const dragIndex = childList.findIndex((item: any) => item.key === dragNode.key);//目标节点位于的索引值const nodeIndex = childList.findIndex((item: any) => item.key === node.key);//当前拖拽节点索引值大于目标节点 上移if (dragIndex > nodeIndex) {//下移} else {}}return of(true);},};

需要注意的是返回的arg中的pos是随机的 有时候为-1 有时候为1 他的目标节点不同，所以在进行传参时需要判断 上移的时候 当pos为-1/1 以及下移的时候当pos为-1/1