On Drag problems with PhoneGap

So, I’ve some updates!

PROBLEM ONE: don’t trust the debugger!
So, technically to find a bug you should use (and trust) a debugger…well, I learned to don’t assume that is 100% reliable and doesn’t affect the result. In fact I was using the Chrome Remote Debugging and it basically affects the reactivity of the app and gives the impression that any drag event is working properly…

PROBLEM TWO: dragging and scaling, again!
When I started to debug properly, I discovered that the problem that I thought I had solved, was not solved properly. So, using the On Drag event of Hype inside a scaled DIV creates problems (doesn’t matter what you do, even if you totally re-implement it, it’s the event that has problems probably).

SOLUTION ONE
Disconnect the cable when you need to test performance and touch reliability, or find another way of debugging.

SOLUTION TWO
Use a native HTML5 “input range” control, instead of a slider built in Javascript!
Maybe there’s a way to fix the “drag inside a scaled element” problem with JS but it’s way more complicated, and the native HTML element has some advantages: it manages any kind of CSS3 transform + you can decide its range and change the size without affecting the values. :wink: The only thing needed is the “touch support” that is still missing natively (weird), but it can be fixed easily:

https://github.com/dwyl/range-touch (jQuery or compatibile library needed)
https://github.com/Selz/rangetouch/blob/master/readme.md (no jQuery)

1 Like