Ngx-drag-scroll: Prevent click propagation immediately after drag and drop

@Sprauch
Thanks for reporting this issue, would you like to make a PR for this bug?

Nah, I'm still a little too new at this. Began developing in Angular less than 18 months ago and joined GitHub yesterday ;)

No worries, I'll try to get it fixed when I have time.

Hey guys, I also have this issue, is there any progress with a fix / a work around?

Hey @stuart-clark-45

I'm working on the release for v2.0, hope this issue will go away by then. If not, I'll come back and fix it.

@bfwg thats great thanks very much, really nice little library other than this bug. Do you have an idea on when you might release v2.0?

@stuart-clark-45

No problem, the progress of 2.0 can be tracked in #66 #68 . After a bit investigation, the issue is harder to fix than I expected. I will try to create a new PR to fix it right after 2.0 release. Sorry for the delay.

@bfwg Awesome looks like you are well on top of things thanks very much :thumbsup:

I dont know if this is related, but I cannot select text on any of my angular apps using mouse-down and highlighting the text. This happens after importing the DragScrollModule. I went to the demo page and verified text-selection is also not working on that page at all either.

The only way to select text right now, anywhere on the page, is by using mouse double click and the keyboard to highlight text...

Is there anything that can be done temporarily to override this behavior?

I solved this by using (reachesLeftBound) to figure out if it's being dragged to prevented the click.
Add (reachesLeftBound) to your dragScroll
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
Add mouse events to your div etc.
<div (mousedown)="down()" (click)="fire()">
In your component.ts add the following

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

This will prevent the click if it was meant to be dragged.
BY THE WAY, scrollbar-hidden still doesn't work for me. If anyone knows how to make it work, I would appreciate a line :)

Hi @STIKO , can give me a plunker link so that I can take a closer look?

I couldn't make it work in plunker since I never used it before.
I imported it in app.module.ts
import {DragScrollModule} from 'ngx-drag-scroll';
Then I added it to @NgModule imports of the same file
imports: [DragScrollModule];
I'm assuming the above is correct as the drag is working.
Now in my component

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

Not sure if the @Input() is necessary. finally the template

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

Everything works just fine except when I scroll, the scroll bar still showing even though I have set disable to true

Can you try to remove the div wrapper for the img tag and give them a width and height?
Something like below. See if that fixes the issue for you.

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