tactiles - Javascript Arrastrar y soltar para dispositivos táctiles

touch move javascript

Question

Estoy buscando un plugin drag & DROP que funcione en dispositivos táctiles.

Me gustaría tener una funcionalidad similar al plugin jQuery UI que permite elementos "droppable".

El complemento jqtouch admite arrastrar, pero no soltar.

Here está el método de arrastrar y soltar que solo admite iPhone / iPad.

¿Alguien puede indicarme un plugin de arrastrar y soltar que funcione en android / ios?

... O podría ser posible actualizar el plugin jqtouch para la capacidad de eliminación, ya se ejecuta en Andriod e IOS.

¡Gracias!

Answer 1

Gracias por los códigos anteriores! - Intenté varias opciones y este fue el boleto. Tuve problemas para prevenir. Predeterminado estaba impidiendo el desplazamiento en el ipad. Ahora estoy probando los artículos arrastrables y funciona muy bien hasta el momento.

if (event.target.id == ''draggable_item'' ) {
    event.preventDefault();
}

Answer 2

Para cualquiera que quiera usar esto y mantener la funcionalidad de "hacer clic" (como John Landheer menciona en su comentario), puede hacerlo con solo un par de modificaciones:

Agregue un par de globales:

var clickms = 100;
var lastTouchDown = -1;

Luego modifique la declaración de cambio del original a este:

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

Es posible que desee ajustar ''clickms'' a su gusto. Básicamente, solo está buscando un ''touchstart'' seguido rápidamente por un ''touchend'' para simular un clic.

Answer 3

Puede usar la IU de Jquery para arrastrar y soltar con una biblioteca adicional que traduzca los eventos del mouse al tacto, que es lo que necesita, la biblioteca que recomiendo es https://github.com/furf/jquery-ui-touch-punch , con esto su arrastre y soltar desde Jquery UI debe trabajar en dispositivos táctiles

o puede usar este código que estoy usando, también convierte los eventos del mouse en touch y funciona como magia.

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

Y en su documento. Simplemente llame a la función init ()

código encontrado desde Here

Answer 4

Tenía la misma solución que la respuesta de gregpress , pero mis elementos arrastrables usaban una clase en lugar de una identificación. Parece funcionar.

var $target = $(event.target);  
if( $target.hasClass(''draggable'') ) {  
    event.preventDefault();  
}

Answer 5

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

El problema con la respuesta de @ryuutatsuo es que bloquea también cualquier entrada u otro elemento que tiene que reaccionar en ''clics'' (por ejemplo, entradas), así que escribí esta solución. 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 utilizado 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 usando 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: 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