Ngx-drag-scroll: ドラッグアンドドロップ直後のクリック伝播を防止する

@Sprauch
この問題を報告していただきありがとうございます。このバグのPRを行いますか？

いや、私はまだこれで少し新しすぎます。 18か月以内にAngularで開発を開始し、昨日GitHubに参加しました;）

心配いりません。時間があるときに修正しようと思います。

やあみんな、私もこの問題を抱えています、修正/回避策の進展はありますか？

ねえ@ stuart-clark-45

私はv2.0のリリースに取り組んでいますが、この問題がそれまでに解消されることを願っています。 そうでない場合は、戻って修正します。

@bfwg本当にありがとう、このバグ以外の本当に素敵な小さなライブラリ。 v2.0をいつリリースするかについてのアイデアはありますか？

@ stuart-clark-45

問題ありません。2.0の進行状況は＃66＃68で追跡できます。 少し調べてみると、思ったよりも問題を解決するのが難しいです。 2.0リリースの直後に修正するために新しいPRを作成しようとします。 遅れて申し訳ありません。

@bfwg素晴らしいですね、どうもありがとうございました：thumbsup：

これが関連しているかどうかはわかりませんが、マウスダウンとテキストの強調表示を使用して、Angularアプリでテキストを選択することはできません。 これは、DragScrollModuleをインポートした後に発生します。 デモページに移動し、テキスト選択もそのページでまったく機能していないことを確認しました。

現在、ページ上の任意の場所でテキストを選択する唯一の方法は、マウスのダブルクリックとキーボードを使用してテキストを強調表示することです...

この動作をオーバーライドするために一時的に実行できることはありますか？

（reachesLeftBound）を使用して、クリックを防ぐためにドラッグされているかどうかを確認することで、これを解決しました。
dragScrollに（reachesLeftBound）を追加します
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
divなどにマウスイベントを追加します。
<div (mousedown)="down()" (click)="fire()">
component.tsに以下を追加します

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

これにより、ドラッグする必要がある場合にクリックが防止されます。
ちなみに、スクロールバー-非表示はまだ私には機能しません。 誰かがそれを機能させる方法を知っているなら、私は一行いただければ幸いです:)

こんにちは@STIKO 、私が詳しく見ることができるように私にプランカーリンクを与えることができますか？

今まで使ったことがなかったので、プランカーで動作させることができませんでした。
app.module.tsにインポートしました
import {DragScrollModule} from 'ngx-drag-scroll';
次に、同じファイルの@NgModuleインポートに追加しました
imports: [DragScrollModule];
ドラッグが機能しているので、上記は正しいと思います。
今私のコンポーネントで

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

@Input()が必要かどうかわからない。 最後にテンプレート

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

スクロールするときを除いて、すべてが正常に機能します。無効をtrueに設定しても、スクロールバーは表示されたままです。

imgタグのdivラッパーを削除して、幅と高さを指定してみてください。
以下のようなもの。 それで問題が解決するかどうかを確認してください。

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