View Full Version : Touch on desktop browser?

14 Jul 2011, 5:30 AM

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
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
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
I found the answer on another post...


14 Jul 2011, 7:46 AM
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
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?

14 Jul 2011, 10:01 AM
Months ago, after I updated to sencha touch v1.1.0 I started having these problems on scrollable elements while testing on desktop.

Just wanted to let you know about a css webkit property:


Setting it to 'none':

img.draggable {

-webkit-user-drag: none;


On desktop, I can start scrolling even when I start the gesture on an image element, obviously this makes no difference on an iOS device as it works just fine without it.

I know you are talking about draggable elements, but this should work too and without JavaScript.

14 Jul 2011, 11:01 AM
Thanks for making me aware of that. I just gave it a go but unfortunately it doesn't seem to work with the draggable image, so I'll stick with the JavaScript workaround for now.

14 Jul 2011, 11:50 AM
Did you set the class attribute of the image(s) element to 'draggable' or the same as the css selector you used?.

14 Jul 2011, 12:27 PM
Got it. Yes, I had not added the class to the img tag. Now it works. Thanks!