2012-09-12 1 views
20

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.Passaggio a nuovi elementi durante il touchmode

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.

+0

Bisogna guardare le coordinate del vostro evento touchmove e vedere se si sovrappongono con le coordinate del tuo elemento html.Ho dovuto scrivere lo stesso codice per un gioco Android jquerymobile, non ce l'ho qui a casa, ma domani posso cercarlo e aggiornare il tuo violino con esso. – Nelson

risposta

20

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.

+0

sembra funzionare, fare attenzione a pesare su questo '' document.elementFromPoint'? – spike

+0

Beh, certamente l'incompatibilità del browser è il più grande svantaggio. Ho trovato 2 articoli che potrebbero essere nel vostro interesse: [document.elementFromPoint - una soluzione jQuery] (http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/) e [elementFromPoint() sotto iOS 5] (http://www.icab.de/blog/2011/10/17/elementfrompoint-under-ios-5/). Lì vedrai anche che devi calcolare la finestra corrente. Non sono sicuro che lo stesso valga per la mia soluzione. Per me la mia soluzione sembra meno dolorosa ma dipende da voi cosa scegliere –

+0

Quello che non pensavo è che è necessario rivolgersi ai browser del telefono/tablet. Purtroppo non so quali browser mobili supportino 'document.elementFromPoint'. Ma penso che se tutti li supportassero sarebbe un leggero aumento delle prestazioni perché le funzioni interne sono più veloci. –

0

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.

2

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'); 
     } 
     } 
    }); 
}); 
+0

Grazie per questa diversa soluzione. Non sto ancora utilizzando jquery mobile, ma questo sembra funzionare bene. – spike