Ngx-drag-scroll: Click propagation

Created on 13 Jul 2018  ·  8Comments  ·  Source: bfwg/ngx-drag-scroll

  • I'm submitting a ...

    • [ x] bug report

    • [ ] feature request

    • [ ] support request => Please do not submit support request here, see note at the top of this template.

I'm having some problems when I drag and release the click, the event seems to not be stopping its propagation as the "Issue #54 - fix: prevent click propagation immediately after drag and drop" says.

  • Version: 1.8.2
  • Browser: all desktop browser

All 8 comments

I'm not able to reproduce in 2.0.0-beta.3. Can you give me the repro steps?

Hi! thanks for answer. I'm trying to scroll through "divs" elements, maybe this is not the right way.
Here is the code:

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

I only click on an image, drag it, but when I release it , it just redirects me to the image link. is there another possibility to add a "dragend" event?

Is there any diference between scrolling on simple images and "divs" elements ?. The rest of the module is working properly and it's a really good job.

I've been trying to reproduce the issue on a demo, and it happens when the dragging item is a link. In the Demo, for example, if you change any image from

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

to

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

it have the same behavior as on my project.

I hope it helps, regards!

I implemented a slight treatment in my code to avoid this issue.
html:
`

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

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

                    </div>

                </div>

`

typescript:

`

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

`

Hi Guilherme! Thanks for your answer! Is this working when you don't reach any of the bounds? Because on my implementation, I have a lot of iitems to scroll and it propagates anyway when I release the click in the middle of it for example and not in the bounds specifically and the bounds events are only produced when you reach one of them ( left or right).

bounds events are produced when you scroll the div, put a console.log in this to see.

Thank you! It worked! But I had to adapt all the child components to listen for the mouse events too.. That's why I asked for that feature in the module itself.

Hi @leogilardi6 , sorry for the late reply. I was swarmpped by work.

I tried to with changing https://github.com/bfwg/ngx-drag-scroll/blob/develop/demo/app/home/home.component.html#L4-L12 to

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

but I was not able to reproduce in version 2.0.0-beta.3

have you tried playing with the latest version?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Andi1990 picture Andi1990  ·  7Comments

MortezaT picture MortezaT  ·  11Comments

IlCallo picture IlCallo  ·  14Comments

tommykamkcm picture tommykamkcm  ·  17Comments

MortezaT picture MortezaT  ·  5Comments