ion-reorder items will not drag/reorder in Ionic 4 application

user_2497278 0
Viewed 277

I am trying to use ion-reorder in my Ionic 4/Angular application. I have copy/pasted from the online document, but I just cannot drag the items.

For example, as from here, I have the following:

        <ion-content style="width: 100%; height: 100%" (ionScrollStart)='ionScrollStart()' (ionScrollEnd)='ionScrollEnd()'>
        <ion-list style="width: 100%; height: 100%;">
            
            <ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
                <ion-item>
                    <ion-label>
                        Item 1
                    </ion-label>
                    <ion-reorder slot="start"></ion-reorder>
                </ion-item>
        
                <ion-item>
                    <ion-label>
                        Item 2
                    </ion-label>
                    <ion-reorder slot="start"></ion-reorder>
                </ion-item>
        
                <ion-item>
                    <ion-label>
                        Item 3
                    </ion-label>
                    <ion-reorder slot="start"></ion-reorder>
                </ion-item>
            </ion-reorder-group>
        </ion-list>
    </ion-content>

I see the reorder lines, and the had appears when I click on it, but the items just will not drag. Also, when I click the mouse, the hand cursor does not close like in the example.

enter image description here

I have nothing fancy here, so just not sure why it won't work.

My ionic info is

    $ ionic info

    Ionic:

         Ionic CLI                     : 5.4.16 (C:\Users\pchapman\AppData\Roaming\npm\node_modules\ionic)
         Ionic Framework               : @ionic/angular 4.11.13
         @angular-devkit/build-angular : 0.803.29
         @angular-devkit/schematics    : 8.3.29
         @angular/cli                  : 8.2.2
         @ionic/angular-toolkit        : 2.3.3

    Cordova:

         Cordova CLI       : 10.0.0 (cordova-lib@10.1.0)
         Cordova Platforms : android 10.1.1, ios 6.2.0, windows 7.0.1
         Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 15 other plugins)

    Utility:

         cordova-res : 0.15.3
         native-run  : 0.2.9

    System:

         Android SDK Tools : 26.1.1 (C:\Users\pchapman\AppData\Local\Android\sdk)
         NodeJS            : v14.17.0 (C:\Program Files\nodejs\node.exe)
         npm               : 7.21.1
         OS                : Windows 10

I have tried this in a page (they are all lazy loaded - hope nothing to do with that), and in a popup component, it it just won't work at all (and yet it does in the doco, and another examples)

Why might this be?

Update 1

Trying to debug into this, this is the line where it is failing....

enter image description here

target appears to the hamburger image...

enter image description here

So it appears the target.closest('ion-reorder') is ont finding the ion-reorder.

And this in turn makes the mousedown do nothing...

enter image description here

I see that there is a shadow root boundary between these two elements. Can closest() transverse this boundary?

enter image description here

And if not, how could this component be working for anyone, which is obviously is, so why not for me?

All just guessing here...

ionic-framework angular
1 Answers

Have you tried this?

import { Component, ViewChild } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';

@Component({
  selector: 'reorder-group-example',
  templateUrl: 'reorder-group-example.html',
  styleUrls: ['./reorder-group-example.css']
})
export class ReorderGroupExample {
  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;

  constructor() {}

  doReorder(ev: any) {
    // The `from` and `to` properties contain the index of the item
    // when the drag started and ended, respectively
    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);

    // Finish the reorder and position the item in the DOM based on
    // where the gesture ended. This method can also be called directly
    // by the reorder group
    ev.detail.complete();
  }

  toggleReorderGroup() {
    this.reorderGroup.disabled = !this.reorderGroup.disabled;
  }
}
user_169658620
Related