Ionic4 drag the ion reorder group component to change the item order

2018 stay ionic There are many components used in the project , This article talks about ion-reorder-group Use of this component . At first I didn't know ionic4 The drag and drop sorting component has been encapsulated in , The supervisor told me . The experience of using this component tells me ： Read the official documents carefully , That's right ！ HTML Components used in , The code is as follows

 <!-- One sort combines one ion-reorder-group-->
 <ion-reorder-group [disabled]="false" (ionItemReorder)="reorder($event)">
     <ion-item color="tertiary" *ngFor="let field of fieldList,let i=index">
        <ion-label>{
   { field.name}}</ion-label>
        <!-- Drag the button -->
        <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 </ion-reorder-group>

Copy

ionItemReorder binding reorder event , yes item The event that will be triggered when being dragged , This incident is ionic Binding in IonReorderGroup On the component . Remember to set disabled attribute , Otherwise, there will be no drag button .

reorder(ev) {
    try {
        if (ev.detail.to === this.fieldList.length) {
            ev.detail.to -= 1;
        }
        if (ev.detail.from < ev.detail.to) {
            this.fieldList.splice(ev.detail.to + 1, 0, this.fieldList[ev.detail.from]);
            this.fieldList.splice(ev.detail.from, 1);
        }
        if (ev.detail.from > ev.detail.to) {
            this.fieldList.splice(ev.detail.to, 0, this.fieldList[ev.detail.from]);
            this.fieldList.splice(ev.detail.from + 1, 1);
        }
        ev.detail.complete();
    } catch (e) {
        return;
    }
}

Copy

customEvent Inherited from Event, Added detail attribute , contain from,to,complete, Record the front and back of the dragged item respectively index,complete Method needs to be called after dragging , Otherwise it will get stuck .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/101149.html Link to the original text ：https://javaforall.cn