Question

我在我的Ionic项目中使用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>

我现在尝试使用内置的Ionic幻灯片功能（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;
  }

}

Answer 1

我设法通过使用Ionic Scroll而不是Ionic Slides来解决这个问题。

这让我可以水平滚动，但拖放工作。

<ion-scroll scrollX="true" zoom="false">
    <div class="inactive-players" [dragula]='"my-bag"' [dragulaModel]="inactive">
        <div class="player-item"><img src="assets/players/1.jpg"><span>Player1</span></div>                  
        <div class="player-item"><img src="assets/players/2.jpg"><span>Player2</span></div>                  
        <div class="player-item"><img src="assets/players/3.jpg"><span>Player3</span></div>     
        <div class="player-item"><img src="assets/players/4.jpg"><span>Player4</span></div>     
        <div class="player-item"><img src="assets/players/5.jpg"><span>Player5</span></div>     
        <div class="player-item"><img src="assets/players/6.jpg"><span>Player6</span></div>     
        <div class="player-item"><img src="assets/players/7.jpg"><span>Player7</span></div>     
        <div class="player-item"><img src="assets/players/8.jpg"><span>Player8</span></div>     
        <div class="player-item"><img src="assets/players/9.jpg"><span>Player9</span></div>     
        <div class="player-item"><img src="assets/players/10.jpg"><span>Player10</span></div>       
        <div class="player-item"><img src="assets/players/11.jpg"><span>Player11</span></div>   
    </div>                                                                  
</ion-scroll>

使用带有离子幻灯片的Dragula

1 个答案: