0
我在我的離子項目中使用了Dragula。這很好用，我可以在頂部面板和底部面板之間拖放物品。使用帶有離子幻燈片的Dragula
<ion-row>
<ion-col col-12 class="active-players" [dragula]='"my-bag"' [dragulaModel]="active">
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-list [dragula]='"my-bag"' [dragulaModel]="example">
<button ion-item detail-none>one</button>
<button ion-item detail-none>two</button>
<button ion-item detail-none>three</button>
<button ion-item detail-none>four</button>
<button ion-item detail-none>five</button>
</ion-list>
</ion-col>
</ion-row>
我現在正嘗試使用內置離子幻燈片功能（https://ionicframework.com/docs/api/components/slides/Slides/）的滑塊替換底部面板。這意味着，而不是一個球員名單，我可以將它們並排顯示爲旋轉木馬風格。
當我使用此代碼，然後滑動作品（我可以向左和向右滾動以顯示更多玩家），但是當我嘗試拖動個人<ion-slide>時，所有11名玩家的整行被選中。
<ion-row>
<ion-col col-12>
<ion-slides [dragula]='"my-bag"' [dragulaModel]="inactive" class="players">
<ion-slide><img src="assets/players/1.jpg"><span>De Gea</span></ion-slide>
<ion-slide><img src="assets/players/2.jpg"><span>Rojo</span></ion-slide>
<ion-slide><img src="assets/players/3.jpg"><span>Bally</span></ion-slide>
<ion-slide><img src="assets/players/4.jpg"><span>Lindelof</span></ion-slide>
<ion-slide><img src="assets/players/5.jpg"><span>Smalling</span></ion-slide>
<ion-slide><img src="assets/players/6.jpg"><span>Mata</span></ion-slide>
<ion-slide><img src="assets/players/7.jpg"><span>Pogba</span></ion-slide>
<ion-slide><img src="assets/players/8.jpg"><span>Mkhitaryan</span></ion-slide>
<ion-slide><img src="assets/players/9.jpg"><span>Lingard</span></ion-slide>
<ion-slide><img src="assets/players/10.jpg"><span>Lukaku</span></ion-slide>
<ion-slide><img src="assets/players/11.jpg"><span>Rashford</span></ion-slide>
</ion-slides>
</ion-col>
</ion-row>
我該如何設置Dragula以便可以拖動單個玩家？
萬一有幫助，我game.ts文件是：
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
@IonicPage()
@Component({
selector: 'page-game',
templateUrl: 'game.html',
})
export class GamePage {
@ViewChild(Slides) slides: Slides;
constructor(public navCtrl: NavController, public navParams: NavParams, private dragulaService: DragulaService) {
this.dragulaService.setOptions('my-bag', {
revertOnSpill: true
});
dragulaService.drop.subscribe((value) => {
console.log('dropped', value);
});
}
ionViewDidLoad() {
this.slides.slidesPerView = 4;
this.slides.loop = true;
}
}
好吧，可怕的解決方案，但爲什麼不把dragula指令放在離子載玻片上。離子幻燈片最有可能在離子幻燈片之前添加一個包裝，所以這是造成這種情況的原因。 – misha130
感謝您的建議。你的意思是這樣嗎？ '[ion-slide [dragula] =''my-bag''>
De Gea'因此，我添加了[dragula]指令11次？ –
Chris
是的。正如我所說，可怕的解決辦法 – misha130