Ngx-drag-scroll: Drag-Scroll-deaktivierte Alternative für Kinder

Hallo, @CrackerakiUA . Hast du [drag-scroll-disabled]="disabled" probiert?

unten Code hinzufügen

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

und am Kinderplatz:

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

auch bool präsentieren, um zu sehen, ob es sich ändert. [drag-scroll-disabled] fühlt sich an, als würde es am Startwert arbeiten und wenn ich die Variable ändere, ändert sie sich nicht. Seltsam, weil in Ihrem Beispiel Toggle funktioniert.

Korrigiere mich, wenn ich falsch liege. Grundsätzlich möchten Sie, dass drag-scroll-disabled mouseenter und mouseleave für alle untergeordneten Elemente im Direktivencontainer deaktiviert.

es ist nicht wie für alle Kinderelemente, eine coole Funktion wäre, jedem Kind ein Attribut hinzuzufügen und für dieses Kind würde das Ziehen des Scrollens abgebrochen werden (in gewisser Weise funktioniert stopPropagation). Ich freue mich, diese Funktion zu implementieren, wenn Sie mich anleiten.

Theoretisch sollte es gut funktionieren, wenn ich Ihre Demo implementiere, aber in meinem Fall habe ich Tonnen von Elementen in diesem Container und das Deaktivieren funktioniert nicht gut.

Haben Sie ein Code-Snippet zum Teilen? Oder können Sie die Demo-App forken und mir zeigen, was Sie genau meinen? Es fällt mir schwer, mir den Anwendungsfall beim Lesen des Codes oder der Demo vorzustellen.

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

Bitte überprüfen Sie den Code, wenn dies die Idee nicht klärt, mache ich eine Demo.

Danke @CrackerakiUA , ich habe die Idee. Ich werde bald Version 2.0.0 veröffentlichen, die ein drag-scroll-item einführt, um alle untergeordneten Elemente zu markieren. Sobald 2.0.0 herauskommt, kann ich diese Funktion gleich hinzufügen.

Cool, weißt du wann das sein wird, brauchst du da Hilfe?

Der PR für 2.0 ist verfügbar https://github.com/bfwg/ngx-drag-scroll/pull/145. Ich mache nur eine Reihe von Tests, um sicherzustellen, dass es keine Regression gibt. Hier ist die neue README https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

Es wäre großartig, wenn Sie dieser PR einen Lauf geben könnten, damit wir sie schneller leben können. Danke!

Drag-Scroll-Element
sieht so schön aus, man kann auch sowas verwenden
Ignorieren-Ziehen-Scroll-Element
Stellen Sie sich ein Beispiel als Trello vor, bei dem Sie Spalten haben, die den Hintergrund nicht ziehen.

Ja, ich überlege, ein drag-scroll-disabled" attribute in the Drag-Scroll-Item` hinzuzufügen, um das Ziehen und Scrollen der übergeordneten App zu deaktivieren. Was denkst du?

Hallo, gibt es diesbezüglich Fortschritte?

Es war in einer meiner Arbeitsniederlassungen und ich habe es vergessen. Ich werde meine Änderungen vorantreiben und sie hoffentlich bis heute einbringen. Tut mir leid

Klingt gut, danke

Die Änderung ist in 7.1.0. Sie können dem untergeordneten Element ein "drag-disabled"-Attribut hinzufügen, das das Ziehen auf dieses Element deaktiviert.

Gelöst in #205

Hey, ich habe 7.1.0 getestet und es funktioniert nicht :(
Mein Beispiel:

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

In Ihrem Aufgabenelement fehlt das Attribut 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>

direkt nachdem ich drag-scroll-item hinzugefügt habe, stoppt das Ziehen und Scrollen, um zu arbeiten. Habe den Fall, den Sie hinzugefügt haben, ausprobiert und außerdem:

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

und das nächste Szenario:

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

Das ist komisch. Kannst du in der Demo-App reproduzieren, da es bei mir einwandfrei funktioniert.

Ich habe Ihr Beispiel verwendet und etwas wie unten gezeigt, das nicht funktioniert:

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

Tatsächlich drag-scroll-item nicht so zu funktionieren, wie es soll, Container drag-scroll können ziehen.

@bfwg funktioniert mein Beispiel auf deiner Seite?

@bfwg Womit oder warum? Wenn ich Drag-Scroll-Blöcke verwende, um alle Elemente des Ghost-Drag-Bildtyps auf der Website zu blockieren, kann ich nicht finden, wie ich das beheben kann

Dieses Problem ist ein Dup, siehe meine Kommentare https://github.com/bfwg/ngx-drag-scroll/issues/223#issuecomment -494259349

Ich habe auf das Problem hingewiesen. @arman2r