Ngx-drag-scroll: Propagación de clics

Creado en 13 jul. 2018  ·  8Comentarios  ·  Fuente: bfwg/ngx-drag-scroll

  • Estoy enviando un...

    • [x] informe de error

    • [ ] solicitud de función

    • [ ] solicitud de soporte => No envíe una solicitud de soporte aquí, vea la nota en la parte superior de esta plantilla.

Tengo algunos problemas cuando arrastro y suelto el clic, el evento parece no detener su propagación como dice el "Problema n.º 54: solución: evitar la propagación del clic inmediatamente después de arrastrar y soltar".

  • Versión: 1.8.2
  • Navegador: todos los navegadores de escritorio

Todos 8 comentarios

No puedo reproducir en 2.0.0-beta.3. ¿Puedes darme los pasos de reproducción?

¡Hola! gracias por responder. Estoy tratando de desplazarme por los elementos "divs", tal vez esta no sea la forma correcta.
Aquí está el código:

<drag-scroll class="drag-scroll center" #dragScroll scrollbar-hidden='true' drag-scroll-y-disabled='true' snap-disabled='true'>
        <div drag-scroll-item *ngFor="let ah of article_list">
          <col-article [article]="ah"></col-article >
        </div>
 </drag-scroll>

Solo hago clic en una imagen, la arrastro, pero cuando la suelto, simplemente me redirige al enlace de la imagen. ¿Hay otra posibilidad de agregar un evento "dragend"?

¿Hay alguna diferencia entre hacer scroll en imágenes simples y elementos "divs"?. El resto del módulo funciona correctamente y es un trabajo realmente bueno.

He estado tratando de reproducir el problema en una demostración y sucede cuando el elemento que se arrastra es un enlace. En la Demo, por ejemplo, si cambia cualquier imagen de

<img _ngcontent-c6="" src="assets/img/c3po.png">

a

<a href="http://anyurl.com"><img _ngcontent-c6="" src="assets/img/c3po.png"></a>

tiene el mismo comportamiento que en mi proyecto.

Espero que te sirva, saludos!

Implementé un ligero tratamiento en mi código para evitar este problema.
html:
`

               <div   dragScroll   (reachesLeftBound)="leftBoundStat($event)" (reachesRightBound)="rightBoundStat($event)" #nav > 

                    <div class=" slide-mes"   *ngFor="let item of items " (click)="doAny(item)" >

                    </div>

                </div>

`

mecanografiado:

`

@ViewChild('nav', {read: DragScrollDirective}) ds: DragScrollDirective;
clickEnable = true;
constructor( ) {
}
@HostListener('mousedown', ['$event'])
onMousedown(event) {

    this.clickEnable = true

}
leftBoundStat(reachesLeftBound: boolean) {
    this.leftNavDisabled = reachesLeftBound;
    this.clickEnable = false;
}

rightBoundStat(reachesRightBound: boolean) {
    this.rightNavDisabled = reachesRightBound;
    this.clickEnable = false;
}
doAny(item){
    if(this.clickEnable){
        //do what you whant on click here
    }
}

`

¡Hola Guilherme! ¡Gracias por tu respuesta! ¿Funciona esto cuando no alcanzas ninguno de los límites? Porque en mi implementación, tengo muchos elementos para desplazarme y se propaga de todos modos cuando suelto el clic en el medio, por ejemplo, y no en los límites específicamente, y los eventos de límites solo se producen cuando llega a uno de ellos ( izquierda o hacia la derecha).

Los eventos de límites se producen cuando desplaza el div, coloque un console.log en esto para ver.

¡Gracias! ¡Funcionó! Pero también tuve que adaptar todos los componentes secundarios para escuchar los eventos del mouse. Es por eso que pedí esa característica en el módulo mismo.

Hola @leogilardi6 , perdón por la respuesta tardía. Estaba abrumado por el trabajo.

Intenté cambiar https://github.com/bfwg/ngx-drag-scroll/blob/develop/demo/app/home/home.component.html#L4 -L12 a

    <drag-scroll class="demo-one"
      drag-scroll-y-disabled="true"
      scrollbar-hidden="true"
      (reachesLeftBound)="leftBoundStat($event)"
      (reachesRightBound)="rightBoundStat($event)"
      #nav
      >
      <a drag-scroll-item *ngFor="let image of imagelist" href="https://www.google.com"><img [src]="'assets/img/' + image" (click)="clickItem(image)"/></a>
    </drag-scroll>

pero no pude reproducir en la versión 2.0.0-beta.3

¿Has probado a jugar con la última versión?

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

Sprauch picture Sprauch  ·  13Comentarios

bfwg picture bfwg  ·  13Comentarios

tommykamkcm picture tommykamkcm  ·  17Comentarios

IlCallo picture IlCallo  ·  14Comentarios

Andi1990 picture Andi1990  ·  10Comentarios