Ngx-drag-scroll: drag-scroll-disabled alternative for children

Hi, @CrackerakiUA . Have you tried[drag-scroll-disabled]="disabled"?

adding below code

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

and on child place:

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

also presenting bool to see if it's changing. [drag-scroll-disabled] feels like it working on start value and when I change the variable, it don't change. Strange because in your example toggle is working.

Correct me if I'm wrong. Basically, you want drag-scroll-disabled to disable mouseenter, and mouseleave for all children element in the directive container.

it's not like for all children elements, cool feature would be to add an attribute to any child and for that child drag scroll would be canceled (in a way stopPropagation works). I am happy to implement that feature, if you guide me.

Theoretically if I implement your demo it should work nice, but in my case, I have tons of elements in that container and disable is not working well.

Do you have a code snippet to share? Or can you fork the demo app and show me what do you mean exactly? I'm having a hard time to picture the use case with reading the code or demo.

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

Please check the code, if that will not clarify the idea, I will make a demo.

Thanks @CrackerakiUA , I got the idea. I will soon push version 2.0.0 out which will introduce a drag-scroll-item to mark all children elements. Once 2.0.0 is out, I can add this feature right after.

Cool, do you know when that will be, do you need any help on that?

The PR for 2.0 is up https://github.com/bfwg/ngx-drag-scroll/pull/145. I'm just doing a bunch of tests to make sure there is no regression. Here is the new README https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

It'd be great if you can give that PR a run so that we can make it live faster. Thanks!

drag-scroll-item
looks so nice, it's possible also to use something like
ignore-drag-scroll-item
imagine an example as trello where you have columns which is not dragging the background.

Yup, I'm thinking of adding a drag-scroll-disabled" attribute in thedrag-scroll-item` to disable the parent app from dragging and scrolling. What do you think?

Hello, any progress on this?

It was on one of my working branches and I forgot about it. I'll push my changes and hopefully get it in by today. Sorry about that 😅

Sounds nice, thank you

The change is in 7.1.0. You can add a ‘drag-disabled’ attribute on the child element, and it will disable dragging on that element.

Resolved in #205

Hey, I have tested 7.1.0 and it's not working :(
My example:

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

You task element is missing the drag-scroll-item attribute.

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

right after I adding drag-scroll-item drag-scroll stopping to work. Tried the case you added and also:

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

and the next scenario:

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

That is strange. Can you reproduce in the demo app because it is working fine for me.

I used your example and made something like below which is not working:

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

In fact drag-scroll-item looks to not work as it suppose to, container drag-scroll have the ability to drag.

@bfwg is my example working on your side?

@bfwg With what or why? using drag-scroll blocks all the ghost drag image type elements on the website, I can't find how to fix this

This issue is a dup, please see my comments https://github.com/bfwg/ngx-drag-scroll/issues/223#issuecomment-494259349

I've pointed out the issue. @arman2r