ionic4的ion-reorder-group拖拽排序

1.html代码

 <ion-reorder-group id="reorder" [disabled]="false" (ionItemReorder)='Reorder($event)'>
    <ion-reorder *ngFor="let item of toList;let i=index" >
      <div class="to-item cw-flex" [ngClass]="{'to-item-first': i===0}">
        <p class="to-item-num">0{{i+1}}</p>
        <p class="to-item-tit cw-overflow">{{item.zqk[2].switchName}}</p>
        <img class="to-item-del" src="../../assets/images/to-trash-outline.svg" (click)="DelClick(item,$event)"/>
      </div>
    </ion-reorder>
  </ion-reorder-group>

解释：本代码不可直接运行，但可改变变量名进行直接套用。其中class为‘to-item-num’的p标签使排序号码

2. ts代码

if (ev.detail.to === this.toList.length) {
  ev.detail.to -= 1;
}
if (ev.detail.from < ev.detail.to) {
  this.toList.splice(ev.detail.to + 1, 0, this.toList[ev.detail.from]);
  this.toList.splice(ev.detail.from, 1);
}
if (ev.detail.from > ev.detail.to) {
  this.toList.splice(ev.detail.to, 0, this.toList[ev.detail.from]);
  this.toList.splice(ev.detail.from + 1, 1);
}

解释：与最后一个交换to的值为数据数组长度，作为下标显然是不对的，顾-1。

from<to，说明下移。首先要移动到目标位置to的下一个位置，因为原位置数据还在，所以要先移动到to+1的位置，然后删除原位置数据
from>to，说明上移。首先要移动到目标位置to处，然后删除原位置数据，因为原位置之前多了一个数据，所以原位置后移1，顾删除from+1位置数据。

以上为ionic4中ion-reorder-group的拖拽排序。

代码为原创，如有转载请注明来源（洋葱先生：http://www.dreamload.cn/blog/?p=937）