Cruzando a nuevos elementos durante el movimiento táctil

Question

Me gustaría hacerlo de modo que a medida que arrastra su dedo sobre un conjunto de elementos, cambie el fondo del que tiene en su dedo.

Parece que quiero usar el evento touchmove para esto, pero por lo que yo sé, el elemento objetivo nunca cambia, incluso cuando se arrastra. El clienteX y el clienteY cambian, y encontré esta función document.elementFromPoint que funciona en cromo, pero parece muy indirecta (además, no estoy seguro de qué navegadores lo admiten)

Ver este violín, quiero que las cajas se vuelvan verdes se toca a través de ellos:

http://jsfiddle.net/QcQYa/9/

Por cierto, en cromo, tendrá que ir a la pestaña de agente de usuario modal del inspector de configuración y elegir la opción "emular eventos de toque" para ver mi ejemplo.

Editar: me encontré con una idea de usar mouseenter aquí How to detect html elements on touchmove y se puso a trabajar en el cromo de escritorio, pero no en Safari Mobile.

Answer 1

Me tomó un enfoque diferente:

Cada evento táctil puedo comprobar si la posición de contacto es dentro de un objeto $('.catch').

function highlightHoveredObject(x, y) { 
    $('.catch').each(function() { 
     // check if is inside boundaries 
     if (!(
      x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() || 
      y <= $(this).offset().top || y >= $(this).offset().top + $(this).outerHeight() 
    )) { 

     $('.catch').removeClass('green'); 
     $(this).addClass('green'); 
     } 
    }); 
} 

Lo puede ver trabajando en jsFiddle.
Funciona en Chrome, espero que también lo haga en dispositivos móviles.

Editar:
En this fiddle que utiliza ambas versiones, la mía y que uno desde el enlace en los comentarios (document.elementFromPoint – a jQuery solution), ambos parecen trabajar en mi teléfono Android. También agregué un punto de referencia rápido y sucio (vea la consola) y como era de esperar document.elementFromPoint es unas milésimas más rápido, si esa es su preocupación, debe verificar el soporte de document.elementFromPoint para los navegadores que quiera admitir.

Answer 2

No puede "desencadenar un evento touchend" o cancelar toques, que necesitaría para comenzar a tocar otro.

Así que sería mejor que vincule el evento touchmove al contenedor y manipule las cajas según su posición/tamaño y la posición táctil, como qué parte de la respuesta de Dan Lee hace.

Answer 3

Encontrará mi solución en this fiddle, he comprobado en mi teléfono Android y funciona bien, utiliza jquery mobile para aprovechar vmousemove caso, también attachs un manejador de eventos touchmove sólo para evitar el desplazamiento de la vista del navegador en el dispositivo móvil.

me pegue aquí el código HTML correspondiente y javascript trozos:

<div id="main" ontouchmove="touchMove(event);"> 
    <span class='catch'>One</span> 
    <span class='catch'>Two</span> 
    <span class='catch'>Three</span> 
    <span class='catch'>Four</span> 
    <span class='catch'>Five</span> 
    <span class='catch'>Six</span> 
    <span class='catch'>Seven</span> 
</div> 

ahora el 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'); 
     } 
     } 
    }); 
});