Crossing over to new elements during touchmove

Question

I\'d like to make it so that as you drag your finger over a set of elements, the background of the one you\'ve got your finger on changes.

It seems like I want to u

Answer 1

You'll find my solution in this fiddle , I tested it on my android phone and it works fine, it uses jquerymobile to take advantage of vmousemove event, it also attachs a handler to touchmove event just to prevent scrolling the browser view on the mobile device.

I paste here the relevant HTML and javascript bits:

   One
   Two
   Three
   Four
   Five
   Six
   Seven

now the javascript:

function elem_overlap(jqo, left, top) {
   var d = jqo.offset();
   return top >= d.top && left >= d.left && left <= (d.left+jqo[0].offsetWidth)
          && top <= (d.top+jqo[0].offsetHeight);
}

/* To prevent WebView from scrolling on swipe, see http://goo.gl/DIZbm */
touchMove = function(event) {
   event.preventDefault(); //Prevent scrolling on this element
}

$("#main").bind("vmousemove", function(evt){
   $('.catch').each(function(index) {
      if ( elem_overlap($(this), evt.pageX, evt.pageY) ) {
         $('.catch').not('eq('+index+')').removeClass('green');
         if (!$(this).hasClass('green')) {
            $(this).addClass('green');
         }
      }
   });
});