HTML Arrastrar y soltar en dispositivos móviles

Question

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

Todas las soluciones dan la bienvenida ... mis pensamientos iniciales son:

1. tienen un botón para dispositivos móviles que "ascensores" el elemento que se arrastró y luego conseguir que se haga clic en la zona que quieren dejar caer el artículo encendido.

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

3. Sus sugerencias y comentarios porfavor.

ACTUALIZACIÓN: Bounty

Si alguien me puede decir cómo hacer que arrastrar y soltar el trabajo en una página web en un dispositivo móvil, sin tener que recurrir a los puntos 1 y 2 anteriores, voy a matar una maravillosa recompensa de 50 rep su camino!

Answer 1

jQuery UI táctil sacador solo resuelve todo.

Es un soporte de eventos táctiles para jQuery UI. Básicamente, simplemente conecta el evento táctil a jQuery UI. Probado en iPad, iPhone, Android y otros dispositivos móviles con capacidad táctil. Utilicé jQuery UI ordenable y funciona como un amuleto.

http://touchpunch.furf.com/

Answer 2

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

Puede consultar su DnD Example. Esto solo funciona en navegadores webkit por cierto.

Volver a adaptar esa lógica a una página web probablemente sea difícil. Según tengo entendido, deshabilitan todo el paneo del navegador e implementan eventos de paneo completamente en javascript, lo que permite la interpretación correcta de arrastrar y soltar.

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

Answer 3

que necesitaba para crear un arrastrar y soltar + rotación que trabaja en el escritorio, móvil, tablet incluyendo el teléfono ventanas. El último lo hizo más complicado (mspointer vs. touch events).

La solución vino de la gran Greensock library

Tomó un poco de saltar a través de aros para hacer el mismo objeto arrastrable y que puede girar pero funciona perfectamente

Answer 4

Para las personas que leen esto desde el año 2017, hay una nueva polyfill de traduciendo eventos táctiles a drag-and-drop, de modo que HTML5 Drag And Drop se pueda usar en dispositivos móviles.

El polyfill fue presentado por Bernardo Castilho en this post.

Aquí hay un demo de esa publicación.

La publicación también presenta varias consideraciones sobre el diseño folyfill.

Answer 5

Jquery táctil Punch es grande, pero lo que también hace es desactivar todos los controles de la div que pueden arrastrarse de manera de evitar que esto tiene que alterar las líneas ... (en el momento de la escritura - línea 75)

cambiar

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

para 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') { 

añadir tantos ORS como desee para cada uno de los elementos que desea 'desbloqueo'

la esperanza de que ayude a alguien

Answer 6

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

Answer 7

Es lo mismo que darle una oportunidad a Tim Ruffle's drag-n-drop polyfill, ciertamente similar a uno Bernardo Castilho 's (véase la respuesta @remdevtec).

simplemente npm install mobile-drag-drop --save (otros métodos de instalación disponible, por ejemplo, con Bower)

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