Ngx-drag-scroll: Evite la propagación del clic inmediatamente después de arrastrar y soltar

@Sprauch
Gracias por informar de este problema, ¿le gustaría hacer un PR para este error?

No, todavía soy un poco nuevo en esto. Comenzó a desarrollar en Angular hace menos de 18 meses y se unió a GitHub ayer;)

No se preocupe, intentaré arreglarlo cuando tenga tiempo.

Hola chicos, también tengo este problema, ¿hay algún progreso con una solución / solución?

Hola @ stuart-clark-45

Estoy trabajando en el lanzamiento de la v2.0, espero que este problema desaparezca para entonces. Si no, volveré y lo arreglaré.

@bfwg eso es genial, muchas gracias, una pequeña biblioteca muy agradable además de este error. ¿Tiene una idea de cuándo podría lanzar la v2.0?

@ stuart-clark-45

No hay problema, el progreso de 2.0 se puede rastrear en # 66 # 68. Después de una pequeña investigación, el problema es más difícil de solucionar de lo que esperaba. Intentaré crear un nuevo PR para solucionarlo justo después del lanzamiento 2.0. Pido disculpas por la demora.

@bfwg Awesome parece que estás bien al tanto de las cosas, muchas gracias: thumbsup:

No sé si esto está relacionado, pero no puedo seleccionar texto en ninguna de mis aplicaciones angulares usando el mouse hacia abajo y resaltando el texto. Esto sucede después de importar DragScrollModule. Fui a la página de demostración y verifiqué que la selección de texto tampoco funciona en esa página.

La única forma de seleccionar texto en este momento, en cualquier lugar de la página, es haciendo doble clic con el mouse y el teclado para resaltar el texto ...

¿Hay algo que se pueda hacer temporalmente para anular este comportamiento?

Resolví esto usando (reachLeftBound) para averiguar si se está arrastrando para evitar el clic.
Agregue (reachLeftBound) a su dragScroll
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
Agregue eventos de mouse a su div, etc.
<div (mousedown)="down()" (click)="fire()">
En su component.ts agregue lo siguiente

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

Esto evitará el clic si estaba destinado a ser arrastrado.
POR cierto, la barra de desplazamiento oculta todavía no funciona para mí. Si alguien sabe cómo hacer que funcione, agradecería una línea :)

Hola @STIKO , ¿puedes darme un enlace de plunker para que pueda verlo más de cerca?

No pude hacerlo funcionar en plunker ya que nunca lo usé antes.
Lo importé en app.module.ts
import {DragScrollModule} from 'ngx-drag-scroll';
Luego lo agregué a las importaciones @NgModule del mismo archivo
imports: [DragScrollModule];
Supongo que lo anterior es correcto ya que el arrastre está funcionando.
Ahora en mi componente

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

No estoy seguro si el @Input() es necesario. finalmente la plantilla

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

Todo funciona bien, excepto cuando me desplazo, la barra de desplazamiento sigue mostrándose a pesar de que configuré deshabilitar en verdadero

¿Puedes intentar quitar el envoltorio div para la etiqueta img y darles un ancho y un alto?
Algo como a continuación. Vea si eso soluciona el problema por usted.

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