javascript - teclado - ¿Cómo puedo capturar eventos de movimiento en un elemento que se agrega al DOM después de que mi dedo ya está en la pantalla?

como hacer captura de pantalla en pc

Question

Estoy trabajando en un proyecto javascript / html5 para iPad.

Necesito poder capturar eventos de movimiento en un elemento que no se agrega al DOM hasta después de que se ha disparado un evento de touchstart (es decir, hasta después de que una persona haya puesto el dedo en la pantalla).

Intenté simular un evento de touchstart y lo touchstart programáticamente ...

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

... sin embargo, esto no funciona. La única forma en que puedo hacer que doStuff comience a disparar es levantar el dedo y luego tocar la pantalla nuevamente, lo que desencadena un segundo evento de touchstart .

¿Cómo puedo capturar eventos de touchmove en un elemento que se agrega al DOM después de que mi dedo ya está en la pantalla?

Answer 1

Para resumir, parece querer:

• en touchstart: para mostrar y ubicar un elemento div con estilo.
• en touchmove: para arrastrar el elemento sin soltar y volver a presionar el botón del mouse .

Si esta interpretación es correcta, la respuesta es manejar los eventos de movimiento en el mismo elemento en el que se hizo clic originalmente, es decir, el elemento "cuerpo". No es necesario manejar los eventos de movimiento del elemento que desea arrastrar (el elemento agregado).

Debe haber muchas formas de escribir el código. Aquí hay una, que probablemente no sea exactamente lo que quiere (principalmente en matemática de posicionamiento) pero debería ser simple de adaptar:

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 permite pruebas de escritorio y se puede eliminar para el uso de dispositivos táctiles.

MANIFESTACIÓN

Answer 2

Si solo necesitas disparar una vez, entonces es bastante fácil

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

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

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

Lo comprobé en mi simulador de ipad. Reemplacé la alerta con un apéndice para que no te avisen constantemente en el iPad.

Si quieres que se dispare continuamente, lo único que se me ocurre es fingir el toque en el elemento creado

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

El movimiento en realidad se desencadena en el contenedor div ya creado que está en el mismo lugar que el elemento creado

Answer 3

ver la documentación de la función arrastrable

aplicarte función

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