I've tried both techniques in this answer to get a "dragging touch highlight" across elements in my PhoneGap App (testing on Android).
Here's my JSFiddle of the touchmove approach
$("td").bind("touchmove", function(evt){
var touch = evt.originalEvent.touches[0]
highlightHoveredObject(touch.clientX, touch.clientY);
});
Here's my JSFiddle of the vmousemove approach
$("#main").bind("vmousemove", function(evt){
$('.catch').each(function(index) {
if ( div_overlap($(this), evt.pageX, evt.pageY) ) {
$('.catch').not('eq('+index+')').removeClass('green');
if (!$(this).hasClass('green')) {
$(this).addClass('green');
}
}
});
});
Both work perfectly when emulating the app from desktop browser. Both work when viewing the JSFiddles from my Android tablet browser. But in the installed app on the tablet, it doesn't work. Instead of an updating highlight as I drag across the elements, all I get is a highlight on the first-touched event. The same for both methods.
Any ideas what's going on?
A comment on this question has an intriguing suggestion that "If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...". Does that ring a bell, and if so, how would I "cancel the touchmove event to get new ones" with either of these approaches?
Alternately, has anyone successfully done a "dragging highlight" effect on a PhoneGap app, and would you care to share your technique?
