Ion reorder and ion-item-sliding is not working together

Ionic Framework ionic-v3
1

Hi,

I am reordering list of items and also at the same time I need to delete item by sliding.
But if I slide from the reorder icon the app freezes.

<ion-list class="song_set_list" show-reorder = "true">
     <div>
      <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)" >
          <ion-item-sliding class = "live-set-list-items" *ngFor="let item of listing_songs1" (ionDrag) = "logDrag($event)" (touchstart)="touchStart($event)" (touchend) = "touchEnd($event);" >
            <ion-item style="color: white; background-color: transparent;" [attr.id]="$index">
              <ion-label  *ngIf="item.song_type == 'AR'; else fan_requested"><h2 class= "songs_list">{{item.song_name}}</h2>
                <h6 class= "songs_list" *ngIf="item.artist; else artistElseBlock">{{item.artist}}</h6>

                <ng-template #artistElseBlock>
                  <h6 class= "songs_list">{{item.artist_name}}</h6>
                </ng-template>

              </ion-label>
              <ng-template #fan_requested>
                <ion-label><h2 class= "songs_list">{{item.song_name}}</h2>
                  <h6 class= "songs_list"  *ngIf="item.artist; else 
                     artistElseBlock">{{item.artist}}</h6>
                  <ng-template #artistElseBlock>
                    <h6 class= "songs_list">{{item.artist_name}}</h6>
                  </ng-template>
              </ion-label>
              </ng-template>
            </ion-item>
              <ion-item-options side="right">
                <button  ion-button color="danger" (click)="deleteSetList(item, slidingItem)">
                    <ion-icon name="trash"></ion-icon> Delete</button>
              </ion-item-options>
          </ion-item-sliding>
      </ion-item-group>
    </div>
  </ion-list>
2

I solved it by removing div after ion-list and removing ion-item-group and putting reorder and ionItemReorder in ion-list.

<ion-list class="song_set_list" show-reorder = "true" reorder="true" (ionItemReorder)="reorderItems($event)" >
     <ion-item-sliding class = "live-set-list-items" *ngFor="let item of listing_songs1" (ionDrag) = 
            "logDrag($event)" (touchstart)="touchStart($event)" (touchend) = "touchEnd($event);" >

…

1 Like