Verwendung von Dragula mit ionischen Folien

Question

Ich verwende Dragula in meinem Ionic Projekt. Das funktioniert gut und ich kann Elemente zwischen dem oberen und dem unteren Bereich ziehen und ablegen.

<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> 

ich versuche jetzt durch Bodenplatte mit einem Schieber mit der eingebauten in ionischer Slides Funktionalität (https://ionicframework.com/docs/api/components/slides/Slides/) zu ersetzen. Dies bedeutet, dass ich anstatt einer Liste von Spielern sie nebeneinander in einem Karussell-Stil zeigen kann.

Wenn ich diesen Code verwende, dann funktioniert das Verschieben (ich kann nach links und rechts scrollen, um mehr Spieler anzuzeigen), aber wenn ich versuche, eine einzelne <ion-slide> zu ziehen, wird die gesamte Reihe aller 11 Spieler ausgewählt.

<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> 

Wie kann ich Dragula so einstellen, dass einzelne Spieler gezogen werden können?

Falls es hilft, meine game.ts Datei ist:

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

ich dies durch den Einsatz ionischer Blättern Sie zu lösen verwaltet statt Ionic Slides.

Dadurch kann ich horizontal scrollen, aber das Drag & Drop funktioniert.

<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>