eventos - touch jquery

Permitir arrastrar y soltar en un dispositivo móvil con pantalla táctil

Question

Recientemente obtuve un teléfono Android y descubrí que el método de arrastrar y soltar en mi sitio no funciona. Entiendo por qué no lo haría, pero ¿alguien ha encontrado una solución para esto? Estoy usando JQuery para implementar el D & D ...

Answer 1

El iPhone al menos tiene ciertos eventos como ontouchstart, ontouchend, etc. Estos son parte de un webkit, pero hay mucha menos información con respecto a Android que a iPhone. Creo que la respuesta a esta pregunta es que la funcionalidad de arrastrar y soltar necesita usar esos eventos en lugar de los eventos que normalmente usaría, o necesita usar ambos.

Este artículo puede ser de interés - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

Answer 2

Hay un complemento de arrastrar y soltar jQuery que admite dispositivos móviles / pantallas táctiles:

http://plugins.jquery.com/project/mobiledraganddrop

En un dispositivo móvil, toca para recoger el elemento y toca para seleccionar la ubicación de colocación. Esto evita el problema de las acciones de arrastre que son secuestradas por el dispositivo / navegador.

Answer 3

Encontré un ejemplo que funciona en la pantalla táctil de mi tableta Android http://www.quirksmode.org/m/tests/drag.html Utiliza "ontouchstart event"

Answer 4

Viejo hilo que sé .......

Aquí tengo una solución que respeta cualquier entrada u otro elemento que tiene que reaccionar en ''clics'' (por ejemplo, entradas) en un elemento que se puede arrastrar. Esta solución hizo posible usar cualquier biblioteca existente de arrastrar y soltar que esté basada en eventos de mousedown, mousemove y mouseup en cualquier dispositivo táctil (o cumputer). Esta es también una solución de navegador cruzado.

He probado en varios dispositivos y funciona rápido (en combinación con la función de arrastrar y soltar de ThreeDubMedia (ver también http://threedubmedia.com/code/event/drag )). Es una solución de jQuery para que pueda usarla solo con jQuery libs. He usado jQuery 1.5.1 para ello porque algunas funciones más nuevas no funcionan correctamente con IE9 y superior (no probado con las versiones más recientes de jQuery).

Antes de agregar cualquier operación de arrastrar o soltar a un evento , primero debe llamar a esta función :

simulateTouchEvents(<object>);

También puede bloquear la entrada de todos los componentes / niños o acelerar el manejo de eventos utilizando la siguiente sintaxis:

simulateTouchEvents(<object>, true); // ignore events on childs

Aquí está el código que escribí. Usé algunos trucos para acelerar la evaluación de las cosas (ver código).

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:''mousedown'',touchmove:''mousemove'',touchend:''mouseup''};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,''input'':1,''textarea'':1,''select'':1,''option'':1};
 }

$(oo).bind(''touchstart touchmove touchend'', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != ''boolean'')?$(ev.target).data(''events''):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv[''click''] || oEv[''mousedown''] || oEv[''mouseup''] || oEv[''mousemove'']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

Lo que hace: Al principio, traduce eventos de un solo toque en eventos de mouse. Comprueba si un evento está causado por un elemento en / en el elemento que debe arrastrarse. Si se trata de un elemento de entrada como input, textarea, etc., omite la traducción, o si un evento de mouse estándar se adjunta también saltará una traducción.

Resultado: cada elemento en un elemento arrastrable sigue funcionando.

Happy coding, greetz, Erwin Haantjes

Answer 5

Utilicé jQuery UI touch punch: funciona pirateando las funciones de mousedown, mouseup y las reemplaza con touchstart, touchend, etc.

ACERCA DE: http://touchpunch.furf.com/

SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

CÓDIGO:

incluir:

<script src="jquery.ui.touch-punch.min.js"></script>

después de su archivo de script jquery UI en su encabezado.

Answer 6

Utilicé la respuesta touch punk anterior y funcionó muy bien. Una nota sobre eso, sin embargo. Encontré que usando el enlace github en el sitio (y arriba):

SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

no funcionó para dispositivos Android que ejecutan Chrome para dispositivos móviles, pero la fuente de lectura en bruto del sitio sí funcionaba. Esto es a partir de la fecha de esta publicación, puede ser reparado por supuesto, pero mientras tanto, tal vez le ahorrará algunos ciclos de depuración.