-1

I have a website that includes dragging and clicking and does work on touch devices. (only using javascript, jquery-ui, and jquery, no other libraries)

It works correctly on some devices (a.k. iPhone and some Android devices), but it does not work correctly on some other android devices, especially if they use the latest version of chrome (40.0.2214.111, e.g.) instead of the stock android browser (which should also be chrome, in Android 4.2 or newer?).

The problem is that I have some buttons (bootstrap .btn) that can also be dragged around using jquery draggable and/or sortable. If you click on a touchscreen you also move a little bit (less then 5 pixels) and it on some devices detects this as a drag instead of a click. Is it possible to use jquery to detect this as a click instead?

Kind regards!

gabn88
  • 781
  • 8
  • 23
  • 1
    http://api.jqueryui.com/draggable/#option-distance: "This option can be used to prevent unwanted drags when clicking on an element." According to the docs it should solve your issue. Have you tried it? – Mario Mar 01 '15 at 08:48

2 Answers2

0

I have had to do something similar because of the same issue, but I was using jQuery Mobile and there you are able to set a threshold for what is considered a click vs a drag.

If you are looking at purely using jQuery there was a post similar that might be able to help you.

Can you detect "dragging" in jQuery?

Community
  • 1
  • 1
Egregory
  • 218
  • 2
  • 9
  • Thank you for your answer, but it does not solve the problem of Touch move coordinates not being available in javascript on some browsers. – gabn88 Feb 28 '15 at 09:47
  • Yeah I wasn't to sure if it would be of use my issue had to do with an android app and a website, so I had to mess with something similar. Sorry it wasn't of use. – Egregory Mar 02 '15 at 15:32
0

ok, so i do not work on jquery UI, but here is how I would do it in jquery (if there was a touchstart and touchend event):

$(".selector").on('touchend',function(event){
  if(moved < 5){ //here moved is the distance moved before touchend
   event.PreventDefault();
   $(selector).trigger('click');
  }
});

Also, after looking up, i also found this (but it wont help you trigger click instead)

$( ".selector" ).draggable({
  distance: 10
});

from: http://api.jqueryui.com/draggable/#option-distance

user8942
  • 141
  • 7
  • The distance option does prevent unwanted drags, but does not create a click event instead. So that was my problem, but by modifying your code I think I can make it work, thank you! :) The difficult thing is getting the moved distance though.. It is easy on mouse events, but much harder on touch events (depends per browser...) – gabn88 Mar 03 '15 at 09:56