Question

我正在使用离子4角7。我正在使用<ion-reorder>对列表进行重新排序。 Drag n Drop第一次可以正常工作，但是当我释放click时，项目卡住了。第一次重新排序后，所有内容都会冻结。而且我无法第二次尝试重新订购。

这是我的.html文件

<ion-list lines="none">
      <ion-reorder-group disabled="false">
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
      </ion-reorder-group>
    </ion-list>

当我拖动n个放置项时。我放下它时会卡住。之后，一切都冻结了。

有帮助...吗？

我正在使用

离子：4.10.2 角度：7.3.0

Answer 1

我认为您需要将数据存储在变量中，并对这些数据进行ngFor来构建您的重新订购商品。

this.items: Array<img: string; title: string; description: string; icon: 
string> = [yourArrayOfObjects];

我认为那您需要捕捉到ionItemReorder事件

<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">

在您的.ts中，reorderItems（）函数可能是

reorderItems(ev) {
    const itemMove = this.items.splice(ev.detail.from, 1)[0];
    this.items.splice(ev.detail.to, 0, itemMove);
    ev.detail.complete();
}

Answer 2

这里的关键是完成活动，您必须手动进行。因此，ionItemReorder事件回调是必须的。如此简单的事情就可以解决问题：

打字稿：

    public onItemReorder({ detail }) {
       detail.complete(true);
    }

HTML ：

<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="false">

Answer 3

ionic4版本：

html代码：

<ion-content>
  <ion-list>
        <ion-list-header>
            <ion-label>INCLUDE</ion-label>
        </ion-list-header>
        <ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
            <ion-item *ngFor="let accessory of accessories">
                <ion-label>{{accessory}}</ion-label>
                <ion-reorder></ion-reorder>
            </ion-item>
        </ion-reorder-group>
   </ion-list>
</ion-content>

打字稿代码：

accessories = ['test', 'test1', 'test2'];

reorder(event) {
        const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
        this.accessories.splice(event.detail.to, 0, itemToMove);
}

这将永远不会引发任何类型的错误，它可以工作。我100％确信，已使用3-4次。希望对您有帮助。

Answer 4

  <ion-list >
              <ion-item-group (ionItemReorder)="reorder($event)"  reorder='true' >
                <ion-item *ngFor="let item of file_uri" (click)="openSubMenu(item.bunch)" style="background-color: #F0F0F0">
                <ion-avatar item-left >
                  <img src="assets/{{item.bunch}}.svg">
                </ion-avatar>  

                  <h2 color="primary_secound">{{item.bunch}}
                  </h2>
                  <p>Click To See Menu of {{item.bunch}} 
                  </p>

                  <ion-icon name="arrow-dropright" item-right></ion-icon>

                </ion-item>
              </ion-item-group>
              </ion-list> 
reorder(event) {
        const itemToMove = this.file_uri.splice(event.from, 1)[0];
        this.file_uri.splice(event.to, 0, itemToMove);
    }

ionic 4：<ion-reorder>无法按预期工作

4 个答案: