Come posso catturare gli eventi touchmove su un elemento che viene aggiunto al DOM dopo che il mio dito è già sullo schermo?

Question

Sto lavorando su un progetto javascript/html5 per iPad.

ho bisogno di essere in grado di catturare TouchMove eventi in un elemento che non viene aggiunto alla DOM fino a dopo un evento touchstart ha sparato (vale a dire fino dopo che una persona ha messo il dito sullo schermo.)

ho provato la simulazione di un evento touchstart e sparando programatically ...

$("#container").append(element); 
element.on("touchmove", doStuff); 
var ev = $.Event("touchstart"); 
element.trigger(ev); 

... però questo non funziona. L'unico modo per ottenere doStuff per avviare l'attivazione è sollevare il dito e toccare nuovamente lo schermo, attivando un secondo evento touchstart.

Come posso rilevare gli eventi touchmove su un elemento che viene aggiunto allo DOM dopo che il mio dito è già sullo schermo?

Answer 1

In sintesi, in cui sembra voler:

• su TouchStart: per visualizzare e posizionare un div stile elemento.
• su touchmove: trascinare l'elemento senza rilasciare e premere nuovamente il pulsante del mouse.

Se questa interpretazione è corretta, allora la risposta è quella di gestire gli eventi TouchMove sullo stesso elementoche è stato originariamente cliccato - vale a dire l'elemento "corpo". Non è necessario gestire gli eventi touchmove dell'elemento che si desidera trascinare (l'elemento aggiunto).

Ci devono essere molti modi per scrivere il codice. Ecco uno, che probabilmente non è esattamente ciò che si vuole (principalmente nei matematica di posizionamento), ma dovrebbe essere semplice da adattarsi:

var $element = $("<div class='element' />"); 

$("body").on({ 
    'touchstart mousedown': function (e) { 
     $element.appendTo("body"); 
     $(this).on('touchmove mousemove', move); 
     move(e);//you could do `$(this).trigger('touchmove', e)` but a conventional function call keeps `move` simple. 
    }, 
    'touchend mouseup': function (e) { 
     $(this).off('touchmove mousemove'); 
    } 
}); 

function move(e) { 
    $element.css({ 
     left: (e.pageX - 10) + 'px', 
     top: (e.pageY - 10) + 'px', 
     cursor: 'pointer' 
    }); 
} 

mousedown/mousemove/mouseup consentire per il test del desktop e può essere rimosso per l'uso dispositivo touch .

DEMO

Answer 2

see documentation draggable function

Applicate si funzione

<div id="track" class="track"> 
<div id="box2" style="left:0; top:0">Drag Me</div> 
</div> 

javascript nativo

window.addEventListener('load', function(){ 

var box2 = document.getElementById('box2'), 
boxleft, // left position of moving box 
startx, // starting x coordinate of touch point 
dist = 0, // distance traveled by touch point 
touchobj = null // Touch object holder 

box2.addEventListener('touchstart', function(e){ 
    touchobj = e.changedTouches[0] // reference first touch point 
    boxleft = parseInt(box2.style.left) // get left position of box 
    startx = parseInt(touchobj.clientX) // get x coord of touch point 
    e.preventDefault() // prevent default click behavior 
}, false) 

box2.addEventListener('touchmove', function(e){ 
    touchobj = e.changedTouches[0] // reference first touch point for this event 
    var dist = parseInt(touchobj.clientX) - startx // calculate dist traveled by touch point 
// move box according to starting pos plus dist 
// with lower limit 0 and upper limit 380 so it doesn't move outside track: 
    box2.style.left = ((boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist) + 'px' 
    e.preventDefault() 
}, false) 

}, false) 

Answer 3

Se avete solo bisogno in modo da attivare una volta, allora è abbastanza facile

function addElement() { 
    $("body").append(element); 

    element.on("touchmove", doStuff); 
    element.trigger("touchmove"); 
} 

http://jsfiddle.net/rx4qdtuj/8/

Ho controllato questo sul mio ipad simulator. Ho sostituito l'avviso con append in modo da non essere costantemente allertato su ipad.

Se si vuole innescare continuamente, l'unica cosa possibile mi viene in mente è stato quello di falsificare l'touchmove sull'elemento creato

http://jsfiddle.net/rx4qdtuj/9/

var element = $("<div class='element' />"); 

$("body").on("touchstart", addElement); 
$(".wrapper").on("touchmove", addElement); 

function addElement() { 
    $("body").append(element); 

    element.on("touchmove", doStuff); 
    element.trigger("touchmove"); 
} 

function doStuff() { 
    $('body').append('a ') 
} 

HTML

<div class="wrapper"></div> 

CSS

.wrapper { 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    width: 300px; 
    height: 300px; 
} 

La mossa in realtà innesca sulla confezione div già creato, che è nello stesso punto come l'elemento creato