Ngx-drag-scroll: Empêcher la propagation des clics immédiatement après le glisser-déposer

@Sprauch
Merci d'avoir signalé ce problème, souhaitez-vous faire un PR pour ce bogue ?

Non, je suis encore un peu trop novice en la matière. J'ai commencé à développer en Angular il y a moins de 18 mois et j'ai rejoint GitHub hier ;)

Pas de soucis, j'essaierai de le réparer dès que j'aurai le temps.

Hé les gars, j'ai aussi ce problème, y a-t-il des progrès avec un correctif / un contournement?

Salut @stuart-clark-45

Je travaille sur la version 2.0, j'espère que ce problème disparaîtra d'ici là. Sinon, je reviendrai pour le réparer.

@bfwg c'est super merci beaucoup, très belle petite bibliothèque autre que ce bug. Avez-vous une idée de la date de sortie de la v2.0 ?

@stuart-clark-45

Pas de problème, les progrès de 2.0 peuvent être suivis dans #66 #68 . Après une petite enquête, le problème est plus difficile à résoudre que prévu. Je vais essayer de créer un nouveau PR pour le corriger juste après la sortie 2.0. Désolé pour le retard.

@bfwg Awesome a l'air d'être au top merci beaucoup :thumbsup:

Je ne sais pas si cela est lié, mais je ne peux pas sélectionner de texte sur aucune de mes applications angulaires en utilisant la souris et en mettant le texte en surbrillance. Cela se produit après l'importation du DragScrollModule. Je suis allé sur la page de démonstration et la sélection de texte vérifiée ne fonctionne pas non plus du tout sur cette page.

La seule façon de sélectionner du texte maintenant, n'importe où sur la page, est d'utiliser le double-clic de la souris et le clavier pour surligner le texte...

Y a-t-il quelque chose qui peut être fait temporairement pour remplacer ce comportement ?

J'ai résolu ce problème en utilisant (reachesLeftBound) pour déterminer s'il est déplacé pour empêcher le clic.
Ajouter (reachesLeftBound) à votre dragScroll
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
Ajoutez des événements de souris à votre div, etc.
<div (mousedown)="down()" (click)="fire()">
Dans votre component.ts ajoutez ce qui suit

click = false;
leftBoundStat(event: any): void {
        if (this.click) {
            this.click = false;
        }
    }

    down() {
        console.log('Mouse down');
        window.setTimeout(this.startCheck(), 1000);
    }

    fire() {
        if (this.click) {
            console.log('Fire the action');

        }
    }
startCheck() {
        this.click = true;
    }

Cela empêchera le clic s'il devait être déplacé.
À propos, la barre de défilement masquée ne fonctionne toujours pas pour moi. Si quelqu'un sait comment le faire fonctionner, j'apprécierais une ligne :)

Salut @STIKO , pouvez-vous me donner un lien plunker pour que je puisse regarder de plus près?

Je ne pouvais pas le faire fonctionner en plunker car je ne l'avais jamais utilisé auparavant.
Je l'ai importé dans app.module.ts
import {DragScrollModule} from 'ngx-drag-scroll';
Ensuite, je l'ai ajouté aux importations de @NgModule du même fichier
imports: [DragScrollModule];
Je suppose que ce qui précède est correct car la traînée fonctionne.
Maintenant dans mon composant

export class Example implements OnInit {
   @Input() 'scrollbar-hidden': boolean;
}

Je ne sais pas si le @Input() est nécessaire. enfin le modèle

<div dragScroll scrollbar-hidden="true"
         drag-scroll="true"
         drag-scroll-y-disabled="true"
         snap-disabled="true">

          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
      </div>
</div>

Tout fonctionne très bien sauf lorsque je fais défiler, la barre de défilement s'affiche toujours même si j'ai défini disable sur true

Pouvez-vous essayer de supprimer le wrapper div pour la balise img et leur donner une largeur et une hauteur?
Quelque chose comme ci-dessous. Voyez si cela résout le problème pour vous.

@Component({
  selector: 'my-app',
  styles: [`
    .image-cell: {
      width: 310px;
      height: 470px;
    }
  `]
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div dragScroll 
         drag-scroll-y-disabled="true"
         scrollbar-hidden="true"
         snap-disabled="true" style="height: 470px; width: 310px;">
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
      </div>
    </div>
  `,
})