Ngx-drag-scroll: 드래그 앤 드롭 직후 클릭 전파 방지

@스프라우치
이 문제를 보고해 주셔서 감사합니다. 이 버그에 대해 홍보하시겠습니까?

아니, 나는 아직 이것에 너무 익숙하지 않습니다. Angular에서 개발을 시작한지 ​​18개월이 안되어 어제 GitHub에 가입했습니다 ;)

걱정하지 마세요. 시간이 나면 수정하도록 노력하겠습니다.

안녕하세요 여러분, 저도 이 문제가 있습니다. 수정/해결 방법으로 진행 상황이 있습니까?

안녕하세요 @stuart-clark-45

저는 v2.0 릴리스를 작업 중입니다. 그때까지는 이 문제가 해결되기를 바랍니다. 안되면 돌아와서 수정하겠습니다.

@bfwg 정말 감사합니다. 이 버그 외에는 정말 멋진 작은 라이브러리입니다. v2.0을 언제 출시할 것인지에 대한 아이디어가 있습니까?

@stuart-clark-45

문제 없습니다. 2.0의 진행 상황은 #66 #68에서 추적할 수 있습니다. 약간의 조사 후에 문제가 예상보다 수정하기 어렵습니다. 2.0 릴리스 직후에 수정하기 위해 새로운 PR을 만들도록 노력하겠습니다. 지연 돼서 죄송합니다.

@bfwg 굉장합니다 당신은 모든 것을 잘하는 것 같습니다 대단히 감사합니다 :thumbsup:

이것이 관련이 있는지는 모르겠지만 마우스를 누르고 텍스트를 강조 표시하여 각도 앱에서 텍스트를 선택할 수 없습니다. 이것은 DragScrollModule을 가져온 후에 발생합니다. 나는 데모 페이지에 갔고 확인된 텍스트 선택 역시 해당 페이지에서 전혀 작동하지 않습니다.

페이지의 어느 곳에서나 지금 바로 텍스트를 선택하는 유일한 방법은 마우스 더블 클릭과 키보드를 사용하여 텍스트를 강조 표시하는 것입니다...

이 동작을 무시하기 위해 일시적으로 수행할 수 있는 작업이 있습니까?

(reachesLeftBound)를 사용하여 클릭을 방지하기 위해 드래그되고 있는지 파악하여 이 문제를 해결했습니다.
dragScroll에 (reachesLeftBound) 추가
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
div 등에 마우스 이벤트를 추가하십시오.
<div (mousedown)="down()" (click)="fire()">
component.ts에서 다음을 추가하십시오.

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

이렇게 하면 드래그하려는 경우 클릭을 방지할 수 있습니다.
그건 그렇고, scrollbar-hidden은 여전히 ​​나를 위해 작동하지 않습니다. 누구든지 그것을 작동시키는 방법을 알고 있다면, 나는 한 줄을 감사하겠습니다 :)

안녕하세요 @STIKO님 , 자세히 볼 수 있도록 플런커 링크를 제공해 주시겠습니까?

나는 전에 그것을 사용하지 않았기 때문에 plunker에서 작동하게 할 수 없었습니다.
app.module.ts에서 가져왔습니다.
import {DragScrollModule} from 'ngx-drag-scroll';
그런 다음 동일한 파일의 @NgModule 가져오기에 추가했습니다.
imports: [DragScrollModule];
드래그가 작동하므로 위의 내용이 맞다고 가정합니다.
이제 내 구성 요소에서

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

@Input() 가 필요한지 확실하지 않습니다. 마지막으로 템플릿

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

스크롤 할 때를 제외하고는 모든 것이 잘 작동합니다. 비활성화를 true로 설정했는데도 스크롤 막대가 계속 표시됩니다.

img 태그의 div 래퍼를 제거하고 너비와 높이를 지정할 수 있습니까?
아래와 같은 것. 문제가 해결되었는지 확인하십시오.

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