0

我正在制作一个 Ionic 应用程序，我正在使用Cupertino Pane来展示一系列幻灯片。

问题是当我想发出拖动事件时，因为幻灯片数组是动态的。因此，要进行拖动事件，我需要更新已创建窗格的设置

这是我的一些代码

ordersPane:any;
selectedOrders: string[] = [];
ordersPaneSettings: CupertinoSettings = { 
  parentElement: '#main',
  breaks: {
      middle: { enabled: false, height: 290, bounce: true },
      top: { enabled: true, height: (this.platform.height() - 230), bounce: true },
      bottom: { enabled: true, height: 97, bounce: true },
  },
  cssClass: 'orders-pane-wrapper',
  showDraggable: true,
  backdrop: false,
  bottomClose: false,
  buttonDestroy: false,
  initialBreak: 'bottom',
  bottomOffset: 50,
  dragBy: ['.draggable'],
  topperOverflow: true,
  onWillDismiss: () => {},
  onDragEnd: () => {}
};


showOrdersPane() {
  if (this.devicePane === undefined) {
    this.ordersPane = new CupertinoPane('#orders-box-pane', this.ordersPaneSettings);
    this.ordersPane .present({animate: true});
  }
}

selectNewOrder(id: string) {
  this.selectedOrders.push(id);
  const newdraggables = ['.draggable'];
  this.selectedOrders.forEach((o, index) => {
    newdraggables.push('.draggable' + index);
  });
  if (this.ordersPane !== undefined) {
    // THIS IS WHERE I WANT TO UPDATE THE "dragBy" property becouse a new item was added and I need to drag the pane with some class.
    this.ordersPane.settings.dragBy = newdraggables ; 
    // But when I do this, I mean reset the drags, then, the drags I added stop working and I can't drag the pane anymore
    console.log(this.devicePane.settings.dragBy);
  }
}

这是我的 HTML

<div id="orders-box-pane" class="cupertino-pane2">
  <ion-slides #ordersSlides [options]="sliderOptions" class="slide-parent">
    <ion-slide *ngFor="let o of selectedOrders; let i = index" class="slide-child tab-slide">
      <div class="device-box-drag{{i}}" style="height: 50px">
        {{ o }}
      </div>
    </ion-slide>
  </ion-slides>
</div>

我想知道是否有任何选项可以动态更新窗格可拖动而不破坏窗格并再次创建它。

非常感谢

4

0 回答 0