Ngx-drag-scroll: 어린이를 위한 드래그-스크롤 비활성화 대안

안녕하세요, @CrackerakiUA 입니다. [drag-scroll-disabled]="disabled" 을 사용해 보셨습니까?

아래 코드 추가

 dragScroll drag-scroll-y-disabled='true' snap-disabled='true' [drag-scroll-disabled]="bool"

그리고 자식 장소에서:

 (mouseenter)="bool=true" (mouseleave)="bool=false"

또한 bool을 제공하여 변경되는지 확인합니다. [drag-scroll-disabled] 는 시작값에서 작동하는 것처럼 느껴지며 변수를 변경해도 변경되지 않습니다. 귀하의 예제에서 토글이 작동하기 때문에 이상합니다.

틀린 점 있으면 지적 해주세요. 기본적으로 drag-scroll-disabled 가 mouseenter drag-scroll-disabled 를 비활성화하고 지시문 컨테이너의 모든 자식 요소에 대해 mouseleave 를 원합니다.

모든 자식 요소의 경우와 달리 멋진 기능은 모든 자식에 속성을 추가하고 해당 자식의 드래그 스크롤이 취소되는 것입니다(stopPropagation 작동 방식). 안내해 주시면 해당 기능을 구현하게 되어 기쁩니다.

이론적으로 데모를 구현하면 잘 작동해야 하지만 제 경우에는 해당 컨테이너에 수많은 요소가 있고 비활성화가 제대로 작동하지 않습니다.

공유할 코드 조각이 있습니까? 아니면 데모 앱을 포크하여 정확히 무엇을 의미하는지 보여주실 수 있습니까? 코드나 데모를 읽으면서 유스 케이스를 그리는 데 어려움을 겪고 있습니다.

<div class="container" dragScroll drag-scroll-y-disabled="true" snap-disabled="true">
    <header title="This should drag background">Something is here</header>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <footer title="This should drag background">Something else</footer>
    <!-- everything else should also drag background -->
</div>

코드를 확인하십시오. 아이디어가 명확하지 않으면 데모를 만들겠습니다.

@CrackerakiUA 감사합니다. 아이디어를 얻었습니다. 나는 곧 drag-scroll-item 를 도입하여 모든 자식 요소를 표시하는 버전 2.0.0을 출시할 것입니다. 2.0.0이 나오면 바로 이 기능을 추가할 수 있습니다.

좋습니다. 언제가 될지 아십니까? 도움이 필요하십니까?

2.0에 대한 PR은 https://github.com/bfwg/ngx-drag-scroll/pull/145에 있습니다. 나는 회귀가 없는지 확인하기 위해 많은 테스트를 수행하고 있습니다. 다음은 새로운 README https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md입니다.

PR을 실행하여 더 빠르게 만들 수 있다면 정말 좋을 것입니다. 감사 해요!

드래그 스크롤 항목
너무 멋지게 보입니다. 다음과 같은 것을 사용할 수도 있습니다.
드래그-스크롤-항목 무시
배경을 끌지 않는 열이 있는 trello와 같은 예를 상상해 보십시오.

네, drag-scroll-disabled" attribute in the drag-scroll-item`을 추가하여 상위 앱이 드래그 및 스크롤하지 않도록 할 생각입니다. 어떻게 생각해?

안녕하세요, 이것에 진전이 있습니까?

그것은 내 작업 지점 중 하나에 있었고 나는 그것을 잊어 버렸습니다. 변경 사항을 적용하고 오늘까지 적용할 수 있기를 바랍니다. 죄송합니다 😂

좋은 소리입니다, 감사합니다

변경 사항은 7.1.0입니다. 자식 요소에 'drag-disabled' 속성을 추가하면 해당 요소에서 끌기가 비활성화됩니다.

#205에서 해결됨

안녕하세요, 7.1.0을 테스트했는데 작동하지 않습니다 :(
내 예:

<drag-scroll [drag-scroll-y-disabled]="true">
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
</drag-scroll>

작업 요소에 drag-scroll-item 속성이 없습니다.

 <drag-scroll [drag-scroll-y-disabled]="true">
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
</drag-scroll>

drag-scroll-item 드래그-스크롤 정지를 추가한 직후에 작동합니다. 추가한 사례와 다음을 시도했습니다.

 <drag-scroll [drag-scroll-y-disabled]="true" drag-scroll-item>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
</drag-scroll>

그리고 다음 시나리오:

<drag-scroll [drag-scroll-y-disabled]="true">
    <ng-container drag-scroll-item>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
    </ng-container>
</drag-scroll>

이상하다. 저에게 잘 작동하기 때문에 데모 앱에서 재현할 수 있습니까?

나는 당신의 예를 사용하고 작동하지 않는 아래와 같은 것을 만들었습니다.

<drag-scroll class="demo-one"
  drag-scroll-y-disabled="true"
  scrollbar-hidden="true"
  (dsInitialized)="onDragScrollInitialized()"
  (indexChanged)="onIndexChanged($event)"
  (reachesLeftBound)="leftBoundStat($event)"
  (reachesRightBound)="rightBoundStat($event)"
  (snapAnimationFinished)="onSnapAnimationFinished()"
  #nav
  >
  <ng-container *ngFor="let image of imagelist; let i = index;" drag-scroll-item>
    <img *ngIf="i%2==0" [src]="'assets/img/' + image" (click)="clickItem(image)" title="{{i}}" drag-disabled/>
    <img *ngIf="i%2!=0" [src]="'assets/img/' + image" (click)="clickItem(image)" title="{{i}}"/>
  </ng-container>

</drag-scroll>

실제로 drag-scroll-item 는 예상대로 작동하지 않는 것처럼 보이지만 컨테이너 drag-scroll 에는 끌 수 있는 기능이 있습니다.

@bfwg 는 내 예가 당신 편에서 작동합니까?

@bfwg 무엇으로 또는 왜? 드래그-스크롤을 사용하여 웹사이트의 모든 고스트 드래그 이미지 유형 요소를 차단합니다. 이 문제를 해결하는 방법을 찾을 수 없습니다.

이 문제는 중복입니다. 내 의견을 참조 하십시오.

문제를 지적했습니다. @arman2r