Ngx-drag-scroll: Propagation des clics

Créé le 13 juil. 2018  ·  8Commentaires  ·  Source: bfwg/ngx-drag-scroll

  • Je soumets un...

    • [ x] rapport de bogue

    • [ ] demande de fonctionnalité

    • [ ] demande d'assistance => Veuillez ne pas soumettre de demande d'assistance ici, voir la note en haut de ce modèle.

J'ai quelques problèmes lorsque je fais glisser et relâche le clic, l'événement semble ne pas arrêter sa propagation comme l'indique le "Problème n°54 - correctif : empêcher la propagation du clic immédiatement après le glisser-déposer".

  • Version : 1.8.2
  • Navigateur : tous les navigateurs de bureau

Tous les 8 commentaires

Je ne suis pas en mesure de reproduire dans 2.0.0-beta.3. Pouvez-vous me donner les étapes de la reproduction ?

Salut! Merci de répondre. J'essaie de faire défiler les éléments "divs", peut-être que ce n'est pas la bonne façon.
Voici le code :

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

Je ne fais que cliquer sur une image, la faire glisser, mais lorsque je la relâche, cela me redirige simplement vers le lien de l'image. existe-t-il une autre possibilité d'ajouter un événement "dragend" ?

Y a-t-il une différence entre le défilement sur des images simples et les éléments "divs" ?. Le reste du module fonctionne correctement et c'est du très bon travail.

J'ai essayé de reproduire le problème sur une démo, et cela se produit lorsque l'élément de glissement est un lien. Dans la démo, par exemple, si vous modifiez une image de

<img _ngcontent-c6="" src="assets/img/c3po.png">

à

<a href="http://anyurl.com"><img _ngcontent-c6="" src="assets/img/c3po.png"></a>

il a le même comportement que sur mon projet.

J'espère que ça aide, salutations!

J'ai implémenté un léger traitement dans mon code pour éviter ce problème.
html :
`

               <div   dragScroll   (reachesLeftBound)="leftBoundStat($event)" (reachesRightBound)="rightBoundStat($event)" #nav > 

                    <div class=" slide-mes"   *ngFor="let item of items " (click)="doAny(item)" >

                    </div>

                </div>

`

manuscrit:

`

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

`

Salut Guilhermé ! Merci pour votre réponse! Est-ce que cela fonctionne lorsque vous n'atteignez aucune des limites ? Parce que sur mon implémentation, j'ai beaucoup d'items à faire défiler et ça se propage quand même quand je relâche le clic au milieu de celui-ci par exemple et pas dans les bornes spécifiquement et les événements de bornes ne se produisent que lorsque vous atteignez l'un d'eux (gauche ou à droite).

les événements de limites sont produits lorsque vous faites défiler la div, mettez un console.log dedans pour voir.

Merci! Ça a marché! Mais j'ai dû adapter tous les composants enfants pour écouter également les événements de la souris. C'est pourquoi j'ai demandé cette fonctionnalité dans le module lui-même.

Salut @leogilardi6 , désolé pour la réponse tardive. J'étais submergé par le travail.

J'ai essayé de changer https://github.com/bfwg/ngx-drag-scroll/blob/develop/demo/app/home/home.component.html#L4 -L12 en

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

mais je n'ai pas pu reproduire dans la version 2.0.0-beta.3

as-tu essayé de jouer avec la dernière version ?

Cette page vous a été utile?
0 / 5 - 0 notes