Ionic Drag Directive


#1

I’m trying to build UI where you can change numeric values by dragging up and down. I’m using on-drag-up and on-drag-down directives and everything works as expected except all content in view moves too when I drag the button.

Here is the pen: http://codepen.io/lrolecek/pen/CBlAL

Is it possible to somehow disable scrolling when I start dragging on the button but have it enabled when I start dragging anywhere else?

Documentation is vague as ever. This maybe suggests that it’s possible but I don’t really understand what author meant by “Blocking the scrolling when moving left and right is a good practice. When all the drag events are blocking you disable scrolling on that area.”

Thanks in advance for your suggestions.


#2

To be honest I am not entirely in the know about all of the scrolling mechanics.

However I’ve just been looking at the $ion-scroll part of the Ionic documentation and there is perhaps two possible solutions.

Ion-scroll

The first I could see would be to create a DIV element and have scrolling confined to that box alone as shown in the example on the page.

Or alternatively there is a locking property under the API which could be used to disable scrolling in various directions. However I think that would require some experimenting with to find a solution.

But hope that is a push in the right direction.


#3

As far as I know there is no way to set locking property from code. You can set it only in HTML as a part of the scroll directive. I might be wrong but I can’t find any property of $ionicScrollDelegate that you could set to enable it from code.

Using ion-scroll as a small area with transparent content that you can drag around might work and I’ll try that. It just seems like such a complicated and fragile hack for something that is so common in mobile UIs.

Thanks anyway, much appreciated.


#4

No worries, I hope it works.