离子重新排序项目不会在 Ionic 4 应用程序中拖动/重新排序

Question

我正在尝试在我的 Ionic 4/Angular 应用程序中使用 ion-reorder。我已经从在线文档中复制/粘贴了，但我无法拖动这些项目。

例如，从here，我有以下内容：

        <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>

我看到重新排序的行，当我点击它时出现了，但项目不会拖动。此外，当我单击鼠标时，手形光标不会像示例中那样关闭。

我在这里没有什么花哨的，所以只是不知道为什么它不起作用。

我的离子信息是

    $ 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

我已经在一个页面中尝试过这个（它们都是延迟加载的 - 希望与此无关），并且在一个弹出组件中，它根本不起作用（但它在 doco 中，并且另一个例子）

为什么会这样？

更新 1

试图调试到这个，这是它失败的那一行......

target 出现在汉堡图片中...

所以看来target.closest('ion-reorder') 没有找到ion-reorder。

这反过来又使 mousedown 什么都不做......

我看到这两个元素之间存在阴影根边界。 closest() 可以跨越这个边界吗？

如果不是，这个组件怎么可能适用于任何人，这显然是，那为什么不适合我呢？

这里只是猜测......

Answer 1

你试过了吗？

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;
  }
}