将 Dragula 与离子载玻片一起使用
Using Dragula with Ionic Slides
我在我的 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 Slides 功能 (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;
}
}
我设法通过使用 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>
我在我的 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 Slides 功能 (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;
}
}
我设法通过使用 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>