Ngx-drag-scroll: ドラッグスクロール-子供のための無効な代替手段

こんにちは、 @ CrackerakiUA 。 [drag-scroll-disabled]="disabled"を試しましたか？

以下のコードを追加

 dragScroll drag-scroll-y-disabled='true' snap-disabled='true' [drag-scroll-disabled]="bool"

と子供の場所で：

 (mouseenter)="bool=true" (mouseleave)="bool=false"

また、ブール値を提示して、変化しているかどうかを確認します。 [drag-scroll-disabled]は開始値で機能しているように感じますが、変数を変更しても変更されません。 あなたの例ではトグルが機能しているので奇妙です。

私が間違っている場合は私を訂正してください。 基本的に、 drag-scroll-disabled mouseenter drag-scroll-disabledを無効にし、ディレクティブコンテナ内のすべての子要素に対してmouseleaveを無効にします。

すべての子要素の場合とは異なり、クールな機能は任意の子に属性を追加することであり、その子のドラッグスクロールはキャンセルされます（stopPropagationが機能する方法で）。 ご案内いただければ、その機能を実装できてうれしいです。

理論的には、デモを実装すればうまくいくはずですが、私の場合、そのコンテナにはたくさんの要素があり、無効化はうまく機能していません。

共有するコードスニペットはありますか？ または、デモアプリをフォークして、正確に何を意味するのかを教えていただけますか？ コードやデモを読んでユースケースを描くのに苦労しています。

<div class="container" dragScroll drag-scroll-y-disabled="true" snap-disabled="true">
    <header title="This should drag background">Something is here</header>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <footer title="This should drag background">Something else</footer>
    <!-- everything else should also drag background -->
</div>

コードを確認してください。それでもアイデアが明確にならない場合は、デモを作成します。

@CrackerakiUAに感謝しdrag-scroll-itemが導入されます。 2.0.0がリリースされたら、すぐにこの機能を追加できます。

かっこいい、それがいつになるか知っていますか、それについて何か助けが必要ですか？

2.0のPRはhttps://github.com/bfwg/ngx-drag-scroll/pull/145です。 リグレッションがないことを確認するために、一連のテストを行っています。 これが新しいREADMEですhttps://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

そのPRを実行して、より速く稼働させることができれば素晴らしいと思います。 ありがとう！

ドラッグスクロールアイテム
見た目がとてもいいので、次のようなものを使用することも可能です
無視-ドラッグ-スクロール-アイテム
背景をドラッグしていない列があるトレロの例を想像してみてください。

はい、 drag-scroll-disabled" attribute in the drag-scroll-item`を追加して、親アプリのドラッグとスクロールを無効にすることを考えています。 どう思いますか？

こんにちは、これについて何か進展はありますか？

それは私の作業ブランチの1つにあり、私はそれを忘れていました。 私は自分の変更をプッシュし、うまくいけば今日までにそれを取り入れます。 申し訳ありません😅

いいですね、ありがとう

変更は7.1.0にあります。 子要素に「drag-disabled」属性を追加すると、その要素でのドラッグが無効になります。

＃205で解決

ねえ、私は7.1.0をテストしましたが、動作していません:(
私の例：

<drag-scroll [drag-scroll-y-disabled]="true">
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
</drag-scroll>

タスク要素にdrag-scroll-item属性がありません。

 <drag-scroll [drag-scroll-y-disabled]="true">
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
</drag-scroll>

drag-scroll-itemドラッグスクロールを追加した直後に停止します。 追加したケースを試してみました。

 <drag-scroll [drag-scroll-y-disabled]="true" drag-scroll-item>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
</drag-scroll>

そして次のシナリオ：

<drag-scroll [drag-scroll-y-disabled]="true">
    <ng-container drag-scroll-item>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
    </ng-container>
</drag-scroll>

それ、変だよ。 デモアプリで正常に動作しているので再現できますか？

私はあなたの例を使用して、機能していない以下のようなものを作成しました：

<drag-scroll class="demo-one"
  drag-scroll-y-disabled="true"
  scrollbar-hidden="true"
  (dsInitialized)="onDragScrollInitialized()"
  (indexChanged)="onIndexChanged($event)"
  (reachesLeftBound)="leftBoundStat($event)"
  (reachesRightBound)="rightBoundStat($event)"
  (snapAnimationFinished)="onSnapAnimationFinished()"
  #nav
  >
  <ng-container *ngFor="let image of imagelist; let i = index;" drag-scroll-item>
    <img *ngIf="i%2==0" [src]="'assets/img/' + image" (click)="clickItem(image)" title="{{i}}" drag-disabled/>
    <img *ngIf="i%2!=0" [src]="'assets/img/' + image" (click)="clickItem(image)" title="{{i}}"/>
  </ng-container>

</drag-scroll>

実際、 drag-scroll-itemは想定どおりに機能しないように見えますが、コンテナdrag-scrollはドラッグする機能があります。

@bfwgはあなたの側で働いている私の例ですか？

@bfwg何で、なぜですか？ ドラッグスクロールを使用すると、Webサイト上のすべてのゴーストドラッグ画像タイプの要素がブロックされますが、これを修正する方法が見つかりません

この問題は重複しています。私のコメントを

私はその問題を指摘しました。 @ arman2r