Ngx-drag-scroll: Impedir a propagação de cliques imediatamente após arrastar e soltar

@Sprauch
Obrigado por relatar este problema, gostaria de fazer um PR para este bug?

Nah, ainda sou um pouco novo nisso. Começou a desenvolver no Angular há menos de 18 meses e se juntou ao GitHub ontem;)

Não se preocupe, tentarei consertá-lo quando tiver tempo.

Ei pessoal, eu também tenho esse problema, há algum progresso com uma correção / uma solução alternativa?

Olá @ stuart-clark-45

Estou trabalhando no lançamento da v2.0, espero que esse problema desapareça até então. Se não, voltarei e consertarei.

@bfwg isso é ótimo, muito obrigado, pequena biblioteca realmente boa além deste bug. Você tem uma ideia de quando poderá lançar a v2.0?

@ stuart-clark-45

Não há problema, o progresso do 2.0 pode ser rastreado em # 66 # 68. Depois de um pouco de investigação, o problema é mais difícil de consertar do que eu esperava. Vou tentar criar um novo PR para corrigi-lo logo após o lançamento do 2.0. Desculpe pelo atraso.

@bfwg Impressionante parece que você está bem no topo das coisas, muito obrigado: thumbsup:

Não sei se isso está relacionado, mas não consigo selecionar texto em nenhum dos meus aplicativos angulares usando o mouse para baixo e destacando o texto. Isso acontece depois de importar o DragScrollModule. Eu fui para a página de demonstração e verifiquei que a seleção de texto também não está funcionando naquela página.

A única maneira de selecionar o texto agora, em qualquer lugar da página, é usando um clique duplo do mouse e o teclado para destacar o texto ...

Existe algo que pode ser feito temporariamente para substituir esse comportamento?

Resolvi isso usando (reachLeftBound) para descobrir se ele estava sendo arrastado para evitar o clique.
Adicione (atingeLeftBound) ao seu dragScroll
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
Adicione eventos de mouse ao seu div etc.
<div (mousedown)="down()" (click)="fire()">
Em seu component.ts adicione o seguinte

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

Isso evitará o clique, se for para ser arrastado.
A propósito, a barra de rolagem oculta ainda não funciona para mim. Se alguém souber como fazer funcionar, gostaria de receber uma linha :)

Olá @STIKO , pode fornecer-me um link de êmbolo para que eu possa ver mais de perto?

Não consegui fazer funcionar no plunker, pois nunca usei antes.
Eu importei em app.module.ts
import {DragScrollModule} from 'ngx-drag-scroll';
Em seguida, adicionei-o a @NgModule importações do mesmo arquivo
imports: [DragScrollModule];
Estou assumindo que o acima está correto, pois o arrasto está funcionando.
Agora no meu componente

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

Não tenho certeza se @Input() é necessário. finalmente o modelo

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

Tudo funciona bem, exceto quando eu rolar, a barra de rolagem ainda é exibida, embora eu tenha definido desativar como verdadeiro

Você pode tentar remover o invólucro div para a tag img e dar a eles uma largura e altura?
Algo como abaixo. Veja se isso resolve o problema para você.

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