Ngx-drag-scroll: Verhindern Sie die Klickweiterleitung sofort nach dem Ziehen und Ablegen

@Sprauch
Vielen Dank, dass Sie dieses Problem gemeldet haben. Möchten Sie eine PR für diesen Fehler machen?

Nee, ich bin noch ein bisschen zu neu darin. Habe vor weniger als 18 Monaten mit der Entwicklung in Angular begonnen und bin gestern GitHub beigetreten ;)

Keine Sorge, ich werde versuchen, es zu reparieren, wenn ich Zeit habe.

Hey Leute, ich habe auch dieses Problem, gibt es Fortschritte mit einem Fix / Workaround?

Hey @stuart-clark-45

Ich arbeite an der Version für v2.0, hoffe, dass dieses Problem bis dahin behoben ist. Wenn nicht, werde ich zurückkommen und es reparieren.

@bfwg das ist großartig, vielen Dank, wirklich nette kleine Bibliothek, abgesehen von diesem Fehler. Haben Sie eine Idee, wann Sie v2.0 veröffentlichen könnten?

@stuart-clark-45

Kein Problem, der Fortschritt von 2.0 kann in #66 #68 verfolgt werden. Nach ein bisschen Recherche ist das Problem schwieriger zu beheben, als ich erwartet hatte. Ich werde versuchen, eine neue PR zu erstellen, um das Problem direkt nach der Veröffentlichung von 2.0 zu beheben. Entschuldigung für die Verspätung.

@bfwg Super sieht aus, als wärst du alles im Griff, vielen Dank :thumbsup:

Ich weiß nicht, ob dies zusammenhängt, aber ich kann in keiner meiner eckigen Apps Text auswählen, indem ich die Maus nach unten drücke und den Text hervorhebe. Dies geschieht nach dem Importieren des DragScrollModule. Ich ging auf die Demo-Seite und verifizierte die Textauswahl auch auf dieser Seite überhaupt nicht.

Die einzige Möglichkeit, Text jetzt überall auf der Seite auszuwählen, besteht darin, den Text per Maus-Doppelklick und der Tastatur hervorzuheben...

Gibt es etwas, das vorübergehend getan werden kann, um dieses Verhalten zu überschreiben?

Ich habe dies gelöst, indem ich (reachesLeftBound) verwendet habe, um herauszufinden, ob es gezogen wird, um das Klicken zu verhindern.
Fügen Sie (reachesLeftBound) zu Ihrer DragScroll hinzu
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
Fügen Sie Mausereignisse zu Ihrem Div hinzu usw.
<div (mousedown)="down()" (click)="fire()">
Fügen Sie in Ihrer component.ts Folgendes hinzu

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

Dadurch wird das Klicken verhindert, wenn es gezogen werden sollte.
ÜBRIGENS, Scrollbar-hidden funktioniert bei mir immer noch nicht. Wenn jemand weiß, wie es funktioniert, würde ich mich über eine Zeile freuen :)

Hallo @STIKO , kann mir ein Plunker-Link geben, damit ich mir das genauer anschauen kann?

Ich konnte es nicht in Plunker zum Laufen bringen, da ich es noch nie zuvor benutzt habe.
Ich habe es in app.module.ts importiert
import {DragScrollModule} from 'ngx-drag-scroll';
Dann habe ich es zu @NgModule Importen derselben Datei hinzugefügt
imports: [DragScrollModule];
Ich gehe davon aus, dass das obige richtig ist, da das Ziehen funktioniert.
Jetzt in meiner Komponente

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

Nicht sicher, ob @Input() notwendig ist. endlich die Vorlage

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

Alles funktioniert einwandfrei, außer wenn ich scrolle, wird die Bildlaufleiste immer noch angezeigt, obwohl ich "disable" auf "true" gesetzt habe

Können Sie versuchen, den div-Wrapper für das img-Tag zu entfernen und ihnen eine Breite und Höhe zuzuweisen?
Etwas wie unten. Sehen Sie, ob das das Problem für Sie behebt.

@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>
  `,
})