On Drag problems with PhoneGap

dragdrop
drag

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


#5

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:

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

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)


(www.360FUN.net) #9

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


(Nick ) #10

Have you tried building it in Android Studio?
https://developer.chrome.com/multidevice/webview/gettingstarted


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