On Drag problems with PhoneGap


(www.360FUN.net) #1

Hi Tumult people! :slight_smile:

I’m pretty stuck with a problem, the On Drag seems not working properly in combination with PhoneGap (CLI 6.3.0). :frowning:

Well, it works but really randomly… :scream:

PhoneGap (animated GIF)

Chrome Mobile (animated GIF)

I cannot create sliders in a native way…any suggestion? :confused:

Drag control problems + workaround
(Nick ) #2

Dont use Phone Gap use XCode much easier.
I made my first drag and drop game for the app store with Hype and XCode.
Here is a tutorial on how to do it using Objective C that I made.

(Nick ) #3

Here is the game for reference.

(www.360FUN.net) #4

I would like to avoid PhoneGap but I need to create an APK for Android, what’s your suggestion?


As michelangelo stated in an earlier post: intel xdk might help you out.

(www.360FUN.net) #6

I made a preliminary test with it and EUREKA: seems working correctly! :smiley:

(www.360FUN.net) #7

The test was made with “App Preview”: today I built a proper APK and…same problem of PhoneGap! :cry:

No idea what to do: I spent hours trying several JavaScripts (with or without Hype) but I cannot isolate the problem!!!

The drag seems working properly in a certain contest but in another it doesn’t…it’s crazy! :sob:

I also have to say that the APK made with PhoneGap is lighter and more responsive than the one made with Intel XDK…anyway I think that the problem is Cordova at this point, but I’m not even sure about that anymore.

(www.360FUN.net) #8

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

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

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)

(www.360FUN.net) #9

Here’s a working example: Drag control problems + workaround

(Nick ) #10

Have you tried building it in Android Studio?

(www.360FUN.net) #11

Nope, I never developed for Android/iOS and I thought that was easier to use something like PhoneGap. It would be nice to have a tutorial to wrap Hype with Android Studio and know which are the advantages/disadvantage! :slight_smile: