Ngx-drag-scroll: alternative de glisser-défilement désactivée pour les enfants

Salut, @CrackerakiUA . Avez-vous essayé [drag-scroll-disabled]="disabled" ?

ajout du code ci-dessous

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

et sur place enfant :

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

présentant également bool pour voir si cela change. [drag-scroll-disabled] impression que cela fonctionne sur la valeur de départ et lorsque je modifie la variable, elle ne change pas. Étrange car dans votre exemple, la bascule fonctionne.

Corrige moi si je me trompe. Fondamentalement, vous voulez que drag-scroll-disabled désactive mouseenter , et mouseleave pour tous les éléments enfants dans le conteneur de directive.

ce n'est pas comme pour tous les éléments enfants, une fonctionnalité intéressante serait d'ajouter un attribut à n'importe quel enfant et pour cet enfant, le défilement par glissement serait annulé (d'une certaine manière, stopPropagation fonctionne). Je suis heureux de mettre en œuvre cette fonctionnalité, si vous me guidez.

Théoriquement, si j'implémente votre démo, cela devrait fonctionner correctement, mais dans mon cas, j'ai des tonnes d'éléments dans ce conteneur et la désactivation ne fonctionne pas bien.

Avez-vous un extrait de code à partager ? Ou pouvez-vous dupliquer l'application de démonstration et me montrer ce que vous voulez dire exactement ? J'ai du mal à imaginer le cas d'utilisation avec la lecture du code ou la démo.

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

Veuillez vérifier le code, si cela ne clarifie pas l'idée, je ferai une démo.

Merci @CrackerakiUA , j'ai eu l'idée. Je sortirai bientôt la version 2.0.0 qui introduira un drag-scroll-item pour marquer tous les éléments enfants. Une fois la version 2.0.0 sortie, je peux ajouter cette fonctionnalité juste après.

Cool, savez-vous quand ce sera, avez-vous besoin d'aide à ce sujet ?

Le PR pour 2.0 est en place https://github.com/bfwg/ngx-drag-scroll/pull/145. Je fais juste un tas de tests pour m'assurer qu'il n'y a pas de régression. Voici le nouveau README https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

Ce serait formidable si vous pouviez donner un coup de main à ce PR afin que nous puissions le faire vivre plus rapidement. Merci!

glisser-défilement-élément
a l'air si joli, il est également possible d'utiliser quelque chose comme
ignorer-drag-scroll-item
imaginez un exemple comme trello où vous avez des colonnes qui ne font pas glisser l'arrière-plan.

Oui, je pense ajouter un drag-scroll-disabled" attribute in the drag-scroll-item` pour désactiver le glissement et le défilement de l'application parente. Qu'en penses-tu?

Bonjour, des avancées là-dessus ?

C'était sur l'une de mes branches de travail et je l'ai oublié. Je vais pousser mes changements et, espérons-le, les obtenir d'ici aujourd'hui. Désolé pour ça

Ça a l'air sympa, merci

Le changement est dans 7.1.0. Vous pouvez ajouter un attribut 'drag-disabled' sur l'élément enfant, et cela désactivera le glissement sur cet élément.

Résolu en #205

Hé, j'ai testé la 7.1.0 et ça ne marche pas :(
Mon exemple :

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

Il manque l'attribut drag-scroll-item votre élément de tâche.

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

juste après avoir ajouté drag-scroll-item drag-scroll en arrêtant de fonctionner. J'ai essayé le cas que vous avez ajouté et également :

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

et le scénario suivant :

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

C'est étrange. Pouvez-vous reproduire dans l'application de démonstration car cela fonctionne bien pour moi.

J'ai utilisé votre exemple et j'ai fait quelque chose comme ci-dessous qui ne fonctionne pas :

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

En fait, drag-scroll-item semble ne pas fonctionner comme il le suppose, le conteneur drag-scroll a la capacité de glisser.

@bfwg est-ce que mon exemple fonctionne de votre côté ?

@bfwg Avec quoi ou pourquoi ? l'utilisation de drag-scroll bloque tous les éléments de type d'image ghost drag sur le site Web, je ne trouve pas comment résoudre ce problème

Ce problème est un dup, veuillez consulter mes commentaires https://github.com/bfwg/ngx-drag-scroll/issues/223#issuecomment -494259349

J'ai signalé le problème. @arman2r