Passaggio a nuovi elementi durante il touchmode

Question

Mi piacerebbe farlo in modo tale che mentre trascini il dito su un insieme di elementi, lo sfondo di quello con cui hai il dito sulle modifiche.

Sembra che voglio utilizzare l'evento touchmove per questo, ma per quanto posso dire l'elemento di destinazione non cambia mai, anche mentre si trascina. Il clientX e clientY cambiano, e ho trovato questa funzione document.elementFromPoint che funziona in chrome, ma sembra molto rotonda (in più non sono sicuro di quali browser lo supportano)

Vedi questo violino, voglio che le caselle diventino verdi come si tocca attraverso di loro:

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

a proposito, in cromo, avrete bisogno di andare nella scheda user agent del modal ispettore config e scegliere "emulare gli eventi touch" per vedere il mio esempio.

Edit: ho trovato un'idea di utilizzare mouseenter qui How to detect html elements on touchmove e ottenuto di lavorare sul desktop Chrome, ma non su Safari Mobile.

Answer 1

ho preso un approccio diverso:

Ogni tocco evento verifico se la posizione tocco è all'interno di un oggetto $('.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 si può vedere lavorare su jsFiddle.
Funziona su Chrome, spero che funzioni anche su dispositivi mobili.

Edit:
In this fiddle ho usato entrambe le versioni, la mia e quella dal link nei commenti (document.elementFromPoint – a jQuery solution), entrambi sembrano lavorare sul mio telefono Android. Ho anche aggiunto un benchmark rapido e sporco (vedi console) e come previsto document.elementFromPoint è qualche millesimo più veloce, se questo è il tuo problema dovresti controllare il supporto di document.elementFromPoint per i browser che vuoi supportare.

Answer 2

Non è possibile "attivare un evento touchend" o annullare i tocchi, che è necessario iniziare a toccarne un altro.

Quindi sarebbe meglio vincolare l'evento touchmove al contenitore e manipolare le scatole in base alla loro posizione/dimensioni e alla posizione del tocco, come parte della risposta di Dan Lee.

Answer 3

Troverete la mia soluzione in this fiddle, ho provato sul mio telefono Android e funziona benissimo, utilizza jquerymobile di sfruttare vmousemove caso, attachs anche un gestore di eventi touchmove solo per evitare lo scorrimento della visualizzazione del browser sul dispositivo mobile.

incollo qui il relativo codice HTML e JavaScript bit:

<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> 

ora il 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'); 
     } 
     } 
    }); 
});