クリックをドラッグして離すと問題が発生します。「問題#54-修正:ドラッグアンドドロップの直後にクリックの伝播を防ぐ」と書かれているように、イベントは伝播を停止していないようです。
2.0.0-beta.3では再現できません。 再現手順を教えていただけますか?
こんにちは! ご回答ありがとうございます。 「divs」要素をスクロールしようとしていますが、これは正しい方法ではない可能性があります。
コードは次のとおりです。
<drag-scroll class="drag-scroll center" #dragScroll scrollbar-hidden='true' drag-scroll-y-disabled='true' snap-disabled='true'>
<div drag-scroll-item *ngFor="let ah of article_list">
<col-article [article]="ah"></col-article >
</div>
</drag-scroll>
画像をクリックしてドラッグするだけですが、離すと画像リンクにリダイレクトされます。 「ドラッグ」イベントを追加する別の可能性はありますか?
単純な画像のスクロールと「div」要素の間に違いはありますか? モジュールの残りの部分は正常に機能しており、本当に良い仕事です。
デモで問題を再現しようとしていますが、ドラッグしているアイテムがリンクの場合に発生します。 たとえば、デモでは、画像をから変更した場合
<img _ngcontent-c6="" src="assets/img/c3po.png">
に
<a href="http://anyurl.com"><img _ngcontent-c6="" src="assets/img/c3po.png"></a>
それは私のプロジェクトと同じ振る舞いをします。
よろしくお願いします。
この問題を回避するために、コードにわずかな処理を実装しました。
html:
`
<div dragScroll (reachesLeftBound)="leftBoundStat($event)" (reachesRightBound)="rightBoundStat($event)" #nav >
<div class=" slide-mes" *ngFor="let item of items " (click)="doAny(item)" >
</div>
</div>
`
タイプスクリプト:
`
@ViewChild('nav', {read: DragScrollDirective}) ds: DragScrollDirective;
clickEnable = true;
constructor( ) {
}
@HostListener('mousedown', ['$event'])
onMousedown(event) {
this.clickEnable = true
}
leftBoundStat(reachesLeftBound: boolean) {
this.leftNavDisabled = reachesLeftBound;
this.clickEnable = false;
}
rightBoundStat(reachesRightBound: boolean) {
this.rightNavDisabled = reachesRightBound;
this.clickEnable = false;
}
doAny(item){
if(this.clickEnable){
//do what you whant on click here
}
}
`
こんにちはGuilherme! ご回答有難うございます! いずれの境界にも達しない場合、これは機能していますか? 私の実装では、スクロールするiitemがたくさんあり、たとえば、境界ではなく、その中央でクリックを離すと、とにかく伝播します。境界イベントは、そのうちの1つに到達したときにのみ生成されます(左または右)。
divをスクロールすると、境界イベントが生成されます。これにconsole.logを入力して確認してください。
ありがとう! 動いた! しかし、マウスイベントをリッスンするようにすべての子コンポーネントを調整する必要がありました。そのため、モジュール自体でその機能を要求しました。
こんにちは@ leogilardi6 、返信が遅くなってすみません。 私は仕事にうんざりしていました。
https://github.com/bfwg/ngx-drag-scroll/blob/develop/demo/app/home/home.component.html#L4-L12をに変更してみました
<drag-scroll class="demo-one"
drag-scroll-y-disabled="true"
scrollbar-hidden="true"
(reachesLeftBound)="leftBoundStat($event)"
(reachesRightBound)="rightBoundStat($event)"
#nav
>
<a drag-scroll-item *ngFor="let image of imagelist" href="https://www.google.com"><img [src]="'assets/img/' + image" (click)="clickItem(image)"/></a>
</drag-scroll>
しかし、バージョン2.0.0-beta.3では再現できませんでした
最新バージョンで遊んでみましたか?