ionic-framework: [Ionic 4.0.0-beta.13] not working for with
Ionic version: (check one with “x”) (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x [X] 4.x
I’m submitting a … (check one with “x”) [X] bug report [ ] feature request
Current behavior:
A list of <ion-item-sliding> refuses to reorder when <ion-reorder> element is placed within the required <ion-item> element of an <ion-item-sliding>, with an <ion-item-options> element present within the same <ion-item-sliding>.
Expected behavior:
Should be able to drag+drop to reorder <ion-item-sliding> with <ion-item-options>.
Steps to reproduce: Use this code, try and re-order list. The first two items with be moveable. The third won’t be. Once you’ve tried to move the third item, all of the items will then be non-movable.
<ion-list lines="full">
<ion-reorder-group disabled="false" (ionItemReorder)="moveChecklist($event)">
<ion-item-sliding>
<ion-item href="/" routerDirection="forward" detail>
<ion-reorder slot="start"></ion-reorder>
<ion-label text-wrap>
<h2>Moveable</h2>
</ion-label>
</ion-item>
</ion-item-sliding>
<ion-item-sliding>
<ion-item href="/" routerDirection="forward" detail>
<ion-reorder slot="start"></ion-reorder>
<ion-label text-wrap>
<h2>Moveable</h2>
</ion-label>
</ion-item>
</ion-item-sliding>
<ion-item-sliding>
<ion-item detail>
<ion-reorder slot="start"></ion-reorder>
<ion-label text-wrap>
<h2>Non moveable (ion-item-options present)</h2>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="light">
<ion-icon name="clipboard" slot="top"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-reorder-group>
</ion-list>
moveChecklist(e): void{
e.detail.complete();
}
Related code: See above
Other information:
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Ionic:
ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.13
@angular-devkit/build-angular : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/angular-toolkit : not installed
Capacitor:
capacitor (Capacitor CLI) : 1.0.0-beta.8
@capacitor/core : 1.0.0-beta.8
System:
NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 12
- Comments: 23 (6 by maintainers)
I have the same issue in 4.0.0-rc.0
In the complete event add your array list in the parameter. like this:
moveChecklist(e): void { this.items = e.detail.complete(this.items); }The method reorder your array list.
The same here … 4.0.0-rc.0. The drop doesn’t render correctly and allow no further drag/drop.
Any update on this issue? @LucasGuarnieri’s solution does not fix the problem of not being able to reorder list items that use
ion-item-slidingandion-item-options. I’m assuming that something is going on with the event handlers for the sliding gesture that is blocking the reorder gesture.Still an issue in beta.16