14 Jul 2011 5:30 AM #1
Touch on desktop browser?
Touch on desktop browser?
I'm new to Touch and have some basic questions...
I know that Touch is for mobile devices, not desktop browsers. However, some simple functionality clearly does work on a desktop browser, as can be seen with the examples bundled with the library (eg. dragdrop).
I need to create an application where icons are dragged and dropped onto each other on the screen. Ideally, I would write the same code for mobile browsers as for desktop browsers.
Is this possible? So far, I've tried but not had much luck on the desktop browser. The browser wants to drag the icon image rather than the draggable object some of the time.
I have noticed that the Solitaire demo also misbehaves in a desktop browser, so maybe I should just give up now...?
Has anyone had success with writing drag-and-drop code that works cross-platform?
14 Jul 2011 5:31 AM #2
Which browser are you using? Your best bet is to use Safari as the framework is essentially made to work on WebKit.
14 Jul 2011 5:42 AM #3
I've tried on Chrome and Safari with some simple test code derived from the dragdrop example. Safari does work better - the icons are at least rendered in the correct locations, whereas on Chrome they are not. However, both suffer a similar problem when trying to drag a SVG image. The browser drags the image instead of the draggable object performing the drag operation. This works fine on my iPad. I tried playing around with z-image in CSS in case it had something to do with layering but to no avail.
14 Jul 2011 7:03 AM #4
14 Jul 2011 7:46 AM #5
Using the onmousedown event to change the default browser behavior (as described in my previous post) solved the issue with the browser dragging the image. I added it to both draggable and droppable objects. Interestingly, it also made the images render in the correct locations, although I have no idea why this should make any difference.
But now I have another problem with the desktop browser (Chrome). The valid drop zone for the droppable is offset below and to the right of where it should be. Again, this works fine on an iPad. It also seems fine using Safari on the desktop. Being able to use Chrome is important to me as otherwise Windows users won't be able to use the app.
Does anyone know how to fix this droppable offset problem with Chrome? I am using the latest version (12.0.742.122) on OSX.
14 Jul 2011 8:34 AM #6
Well, it seems that Google has fixed the problem in the latest nightly build of Chrome.
Somewhere between the current dev channel build (14.0.814.0) and the current Canary build (14.0.822.0) the problem got fixed.
One final question: If I use the latest WebKit browser, should I generally expect that Touch will behave fine on a desktop browser? Obviously, it appears that there are some differences, but is this more exception than the rule?