Question

我需要在离子3中进行离子卡分类。我正在使用jquery可排序插件，在web环境中，它工作正常，但在ionic3中，它无法正常工作。

<div class="container">
        <div *ngFor="let tab of page.tabs" class="tab"
            [ngClass]="{'selected': tab==page.currentTab}"
            (click)="this.choose($event, tab)">

            <ion-card>
                <ion-card-header> 
                 {{tab.get('title')}} 
                </ion-card-header> 
                <ion-card-content> 
                    <count-items [item_counts]="tab.countItems"></count-items>
                </ion-card-content> 
            </ion-card>
        </div>

并且在视野中：

 ngOnInit() {
        this.pageService.generateCountSummaryForTabs();
        var _parent = this;
        setTimeout(() => {
            console.log('starting...');
            console.log(  this.el.nativeElement.getElementsByClassName( 'container' )[0] )
            jQuery( this.el.nativeElement.getElementsByClassName( 'container' )[0] ).sortable( {
                handle: ".handle",
                startPos: null,
                endPos: null,
                start: function( event, ui ) {
                    this.startPos = ui.item.index();
                },
                stop: function( event, ui ) {
                    this.endPos = ui.item.index();
                    //1. update the dataTableObject orderedList position
                    _parent.pageService.swapTab( this.startPos, this.endPos );
                }
            });
        }, 500 );
    }

但是当我加载页面时，该卡根本不可排序，我根本没有看到控制台的错误。

有谁能告诉我如何在ionic3中对卡片进行排序？

Answer 1

从Ionic API

尝试ItemReorder

项目重新排序可添加更改组中项目顺序的功能。它可以在离子列表或离子项组中使用以提供视觉效果拖放界面。

<强>模板

<ion-list>
  <ion-list-header>Header</ion-list-header>
  <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
    <ion-item *ngFor="let item of items">
      <ion-card>
        // your code here
      </ion-card>
    </ion-item>
  </ion-item-group>
</ion-list>

<强>控制器

let items = [1,2,3,4,5];

reorderItems(indexes) {
    let element = this.items[indexes.from];
    this.items.splice(indexes.from, 1);
    this.items.splice(indexes.to, 0, element);
}

Answer 2

component.html（模板文件）

<div class="container">
  <ion-list (ionItemReorder)="reorderItems($event)" reorder="true">
    <ion-item *ngFor="let tab of page.tabs" class="tab">
        <ion-card>
            <ion-card-header>
              {{tab.get('title')}}
            </ion-card-header>
            <ion-card-content>
              <count-items [item_counts]="tab.countItems"></count-items>
            </ion-card-content>
          </ion-card>
    </ion-item>
  </ion-list>
</div>

component.ts

reorderItems(indexes) {
    let element = this.chats[indexes.from];
    this.chats.splice(indexes.from, 1);
    this.chats.splice(indexes.to, 0, element);
}

有关更多详细信息，请参见Ionic Item Reorder。

如何在ionic3 / angular4中进行排序

2 个答案: