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

Question

Acabo de recibir un teléfono Android y descubrí que el 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 del webkit, pero hay mucha menos información con respecto a Android que el 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

No es un lastre para jQuery y soltar plugin que tiene soporte para los móviles dispositivos de pantalla táctil /:

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

En un dispositivo móvil, toque para recoger el artículo y toque 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

He encontrado un ejemplo que funciona en mi pantalla táctil tablet Android http://www.quirksmode.org/m/tests/drag.html Es utilizar "evento ontouchstart"

hilo

Answer 4

viejo yo sé .......

que tengo aquí una solución que respete cualquier entrada u otro elemento que tiene que reaccionar en 'clics' (por ejemplo, entradas) en un elemento arrastrable. 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 (consulte 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 de no funcionan correctamente con IE9 y superior (no probado con las versiones más recientes de jQuery).

Antes agregar cualquier arrastra y coloca operación para un evento usted tiene que llamar a esta función primera:

simulateTouchEvents(<object>); 

También puede bloquear todos los componentes/hijos para la entrada o para acelerar gestión de eventos utilizando la siguiente sintaxis:

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

Aquí está el código que escribí. Utilicé algunos buenos 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: En un primer momento, se traduce eventos táctiles individuales en eventos de ratón. 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.

codificación feliz, greetz, Erwin Haantjes

Answer 5

que utiliza jQuery UI golpe contacto - que funciona por el pirateo de la mousedown, características mouseup y los reemplaza con touchstart, etc. touchend

SOBRE: http://touchpunch.furf.com/

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

CÓDIGO:

incluyen:

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

después de su archivo de comandos de interfaz de usuario jQuery en su cabecera.

Answer 6

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

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

no funcionó para los dispositivos Android corriendo móvil Chrome, pero la fuente legible por humanos en bruto desde el sitio hizo trabajo . 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.