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".
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?