Ngx-drag-scroll: alternativa desabilitada de arrastar e rolar para crianças

Olá, @CrackerakiUA . Você já experimentou [drag-scroll-disabled]="disabled" ?

adicionando o código abaixo

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

e no lugar da criança:

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

também apresentando bool para ver se ele está mudando. [drag-scroll-disabled] parece estar trabalhando no valor inicial e quando eu mudo a variável, ela não muda. Estranho porque no seu exemplo a alternância está funcionando.

Corrija-me se eu estiver errado. Basicamente, você deseja que drag-scroll-disabled desabilite mouseenter e mouseleave para todos os elementos filhos no contêiner de diretiva.

não é como para todos os elementos filhos, um recurso legal seria adicionar um atributo a qualquer filho e, para esse filho, a rolagem de arrastar seria cancelada (de uma forma que stopPropagation funciona). Estou feliz em implementar esse recurso, se você me orientar.

Teoricamente, se eu implementar seu demo, ele deve funcionar bem, mas no meu caso, tenho toneladas de elementos naquele contêiner e desabilitar não está funcionando bem.

Você tem um trecho de código para compartilhar? Ou você pode fazer um fork do aplicativo de demonstração e me mostrar o que você quer dizer exatamente? Estou tendo dificuldade em imaginar o caso de uso com a leitura do código ou demo.

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

Por favor, verifique o código, se isso não esclarecer a ideia, farei uma demonstração.

Obrigado @CrackerakiUA , tive a ideia. Em breve lançarei a versão 2.0.0, que apresentará um drag-scroll-item para marcar todos os elementos filhos. Assim que 2.0.0 for lançado, posso adicionar esse recurso logo em seguida.

Legal, sabe quando vai ser, precisa de ajuda nisso?

O PR para 2.0 está disponível https://github.com/bfwg/ngx-drag-scroll/pull/145. Estou apenas fazendo vários testes para ter certeza de que não há regressão. Aqui está o novo LEIA-ME https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

Seria ótimo se você pudesse dar uma chance a esse PR para que possamos torná-lo vivo mais rápido. Obrigado!

arrastar-rolar-item
parece tão bom, é possível usar algo como
ignore-drag-scroll-item
imagine um exemplo como trello onde você tem colunas que não estão arrastando o fundo.

Sim, estou pensando em adicionar drag-scroll-disabled" attribute in the drag-scroll-item` para desabilitar o aplicativo pai de arrastar e rolar. O que você acha?

Olá, algum progresso nisso?

Estava em um dos meus ramos de trabalho e esqueci-me dele. Vou forçar minhas alterações e, com sorte, chegar até hoje. Desculpe por isso 😅

Soa bem obrigado

A mudança está em 7.1.0. Você pode adicionar um atributo 'desativado para arrastar' no elemento filho e ele desativará o recurso de arrastar nesse elemento.

Resolvido em # 205

Ei, eu testei 7.1.0 e não está funcionando :(
Meu exemplo:

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

Seu elemento de tarefa está sem o atributo 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>

logo depois de adicionar drag-scroll-item arrastar e rolar parando para funcionar. Tentei o caso que você adicionou e também:

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

e o próximo cenário:

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

Isso é estranho. Você pode reproduzir no aplicativo demo porque está funcionando bem para mim.

Usei seu exemplo e fiz algo como abaixo que não está funcionando:

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

Na verdade, drag-scroll-item parece não funcionar como deveria, o contêiner drag-scroll tem a capacidade de arrastar.

@bfwg meu exemplo está funcionando a seu

@bfwg Com o quê ou por quê? usando drag-scroll bloqueia todos os elementos de tipo de imagem de arrastar fantasma no site, não consigo encontrar como consertar isso

Este problema é uma cópia, consulte meus comentários https://github.com/bfwg/ngx-drag-scroll/issues/223#issuecomment -494259349

Eu indiquei o problema. @ arman2r