最近在做一个树节点的上下移动然后实现排序的问题。直接看图:

实现已选查询条件的上下移动。结合了primeng 的picklist 组件。
下面是html代码
<p-tabPanel header="查询条件"> <div class="row selfHeight" style="margin-left: 10px;"> <div class="col-4 selfHeight" style="padding: 0px;"> <div style="margin:0 0 10px 0">所有可选查询条件</div> <div style="margin: 0px 6px;width: 100%"> <select class="select form-control radius selfHeight" style="padding:0.2rem 0.75rem;height:30px;margin-left: -6px;width: 100%" (change)="changeQueryConditionSelect($event.target.value)"> <option *ngFor="let values of selectData" value="{{values.attrGroupId}}"> {{values.attrGroupName}} </option> </select> </div> <p-tree [value]="leftQueryCondition" selectionMode="multiple" [(selection)]="selectLeftCondition" (onNodeSelect)="queryConditionLeftNodeSelect($event)" [style]="{‘height‘:‘calc(100% - 64px)‘,‘width‘:‘100%‘,‘overflow‘:‘auto‘,‘border-color‘:‘#e0e0e0‘,‘color‘:‘#333333‘,‘font-size‘:‘13px‘}"> </p-tree> </div> <div class="col-2" style="padding: 0px;margin-top: 120px;text-align: center"> <div style="margin-bottom: 10px"> <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveRightCondition()"> <i class="fa fa-angle-double-right" aria-hidden="true"></i> </button> </div> <div> <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveLeftCondition()"> <i class="fa fa-angle-double-left" aria-hidden="true"></i> </button> </div> </div> <div class="col-4 selfHeight" style="padding: 0px;"> <div style="margin:0 0 10px 0">已选查询条件</div> <p-tree [value]="rightQueryCondition" selectionMode="multiple" [(selection)]="selectRightCondition" (onNodeSelect)="queryConditionRightSelect($event)" [style]="{‘height‘:‘calc(100% - 34px)‘,‘width‘:‘100%‘,‘overflow‘:‘auto‘,‘border-color‘:‘#e0e0e0‘,‘color‘:‘#333333‘,‘font-size‘:‘13px‘}"> <ng-template let-node pTemplate="default"> {{node.label}} <select [(ngModel)]="node.symbol" type="text"> <option *ngFor="let values of operation" value="{{values.enumvalCode}}">{{values.enumvalName}}</option> </select> </ng-template> </p-tree> </div> <div class="col-2" style="padding: 0px;margin-top: 120px;text-align: center"> <div style="margin-bottom: 10px"> <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveUp()"> <i class="fa fa-angle-up" aria-hidden="true"></i> </button> </div> <div> <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveDown()"> <i class="fa fa-angle-down" aria-hidden="true"></i> </button> </div> </div> </div> </p-tabPanel>
下面是ts代码:
moveUp() {  //右侧选只选中一个时才能移动
    if (this.selectRightCondition && this.selectRightCondition.length==1) {
      let data = this.rightQueryCondition;
      let index = 0;
      data.forEach((record, i) => {
        if (record[‘fieldCode‘] === this.selectRightCondition[0][‘fieldCode‘]) {
          return index = i;
        }
      })
      var temp;
      if (index === 0 || index > data.length - 1) {
        this.rightQueryCondition = data;
      } else {
        temp = data[index];
        data[index] = data[index - 1];
        data[index - 1] = temp;
        this.rightQueryCondition = data;
      }
    }
  }
  moveDown() {
    if (this.selectRightCondition && this.selectRightCondition.length==1) {
      let data = this.rightQueryCondition;
      let index = 0;
      data.forEach((record, i) => {
        if (record[‘fieldCode‘] === this.selectRightCondition[0][‘fieldCode‘]) {
          return index = i;
        }
      })
      var temp;
      if (index === data.length - 1 || index < 0) {
        this.rightQueryCondition = data;
      } else {
        temp = data[index];
        data[index] = data[index + 1];
        data[index + 1] = temp;
        this.rightQueryCondition = data;
      }
    }
  }
 
        