Arrastrar y soltar HTML en dispositivos móviles

Cuando agrega arrastrar y soltar a una página web usando JavaScript, como jQuery UI que se puede arrastrar y soltar, ¿cómo puede hacer que esto funcione cuando se ve a través de un navegador en un dispositivo móvil, donde las acciones de la pantalla táctil para arrastrar son interceptadas por el teléfono para desplazarse por la página, etc.

Todas las soluciones son bienvenidas ... mis pensamientos iniciales son:

1. Tenga un botón para dispositivos móviles que "levante" el elemento que se va a arrastrar y luego haga que hagan clic en la zona en la que quieren soltar el elemento.

2. Escriba una aplicación que haga esto para dispositivos móviles en lugar de intentar que la página web funcione en ellos.

3. Sus sugerencias y comentarios por favor.

jQuery UI Touch Punch simplemente lo resuelve todo.

Es un soporte de evento táctil para jQuery UI. Básicamente, solo conecta el evento táctil a la interfaz de usuario de jQuery. Probado en iPad, iPhone, Android y otros dispositivos móviles táctiles. Usé jQuery UI ordenable y funciona como un encanto.

http://touchpunch.furf.com/

Hay un nuevo polyfill para traducir eventos táctiles para arrastrar y soltar, de modo que HTML5 Drag And Drop se puede utilizar en dispositivos móviles.

El polyfill fue introducido por Bernardo Castilho en esta publicación .

Aquí hay una demostración de esa publicación.

La publicación también presenta varias consideraciones del diseño de folyfill.

La versión beta de Sencha Touch tiene soporte para arrastrar y soltar.

Puede consultar su ejemplo de DnD . Por cierto, esto solo funciona en navegadores webkit.

Actualizar esa lógica en una página web probablemente será difícil. Según tengo entendido, deshabilitan todos los panoramas del navegador e implementan eventos de panoramización completamente en javascript, lo que permite una interpretación correcta de arrastrar y soltar.

Actualización: el enlace de ejemplo original está muerto, pero encontré esta alternativa:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Necesitaba crear una rotación de arrastrar y soltar + que funciona en computadoras de escritorio, dispositivos móviles, tabletas, incluido Windows Phone. El último lo hizo más complicado (eventos mspointer vs. touch).

La solución vino de la gran biblioteca Greensock

Se necesitaron algunos saltos a través de aros para hacer que el mismo objeto se pueda arrastrar y girar, pero funciona perfectamente

También podría probar el polyfill de arrastrar y soltar de Tim Ruffle , ciertamente similar a Bernardo Castilho (ver la respuesta de @remdevtec).

Simplemente haz npm install mobile-drag-drop --save (otros métodos de instalación disponibles, por ejemplo, con bower)

Entonces, cualquier interfaz de elemento que dependa de la detección táctil debería funcionar en el móvil (por ejemplo, arrastrando solo un elemento, en lugar de desplazarse + arrastrar al mismo tiempo).

Jquery Touch Punch es genial, pero lo que también hace es deshabilitar todos los controles en el div que se puede arrastrar, por lo que para evitar esto, debe alterar las líneas ... (en el momento de escribir este artículo, línea 75)

cambio

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

leer

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

agregue tantos ors como desee para cada uno de los elementos que desea 'desbloquear'

Espero que ayude a alguien

aquí está mi solución:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

La biblioteca Sortable JS es compatible con pantallas táctiles y no requiere jQuery.

La forma en que maneja las pantallas táctiles indica que debe tocar la pantalla durante aproximadamente 1 segundo para comenzar a arrastrar un elemento.

Además, presentan una prueba de video que muestra que esta biblioteca se ejecuta más rápido que JQuery UI Sortable.