javascript - Habilitar el arrastre en UIWebView/WKWebView

ios

Question

Trello, en el sitio web de escritorio, le permite arrastrar elementos de esta forma:

Sin embargo, cuando se usa Safari en iOS, esto no funciona.

Selecciona el elemento o aparece una hoja.

Si presento esto en un UIWebView o WKWebView, ¿puedo hacer que WebView actúe más como un escritorio de Safari, de modo que pueda arrastrar los elementos?

Descubrí que puedo detener varias acciones de iOS enviando a la vista web algo de javascript:

// stop selection
webView.stringByEvaluatingJavaScriptFromString("document.documentElement.style.webkitUserSelect=''none'';")

// stop copy/paste etc
webView.stringByEvaluatingJavaScriptFromString("document.documentElement.style.webkitTouchCallout=''none'';")

// stop loupe
webView.stringByEvaluatingJavaScriptFromString("document.body.style.webkitUserSelect=''none'';")

Pero esto todavía no me deja arrastrar elementos alrededor.

¿Hay una solución?

(Sé que hay una aplicación Trello, tengo curiosidad si esto es posible con WebView)

Answer 1

Trello, en el sitio web de escritorio, le permite arrastrar elementos alrededor ...

Sin embargo, cuando se usa Safari en iOS, esto no funciona.

La razón por la que no funciona en Safari Safari es porque considera que los eventos del mouse (en el escritorio) son diferentes a los eventos táctiles (en iOS)

Si presento esto en un UIWebView o WKWebView, ¿puedo hacer que WebView actúe más como un escritorio de Safari, de modo que pueda arrastrar los elementos?

.. Tengo curiosidad si esto es posible con WebView.

Sí, es posible en WebView. Puede usar la interfaz de usuario de Jquery para arrastrar y soltar con una biblioteca adicional que traduce los eventos del mouse al tacto, que es lo que necesita. Echa un vistazo a jquery-ui-touch-punch . Con esto, su arrastrar y soltar desde la interfaz de usuario de Jquery funcionaría en iOS o en cualquier dispositivo. Puedes usar algo como:

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

para convertir los eventos del mouse en touch y funciona como magia. Eche un vistazo a this tutorial sobre jQuery UI Touch Punch, con jQuery UI. Aquí hay un buen artículo con demo en el mismo.

código de cortesía

Answer 2

En caso de que solo se esté preguntando si hay una forma sencilla de habilitar la plataforma multiplataforma de arrastrar y soltar incluso en dispositivos móviles, puedo sugerirle que use Interact.js , una biblioteca de interacción de IU que he usado con éxito en múltiples proyectos.

Usando un pequeño código puedes lograr un trabajo de arrastrar y soltar, como este:

var position = { x: 0, y: 0 };
interact(''.element'')
  .draggable({
    onmove: function(e) {
      var target = e.target;

      // calculate position
      position.x += e.dx;
      position.y += e.dy;

      // translate the element
      target.style.webkitTransform = ''translate('' + position.x + ''px, '' + position.y + ''px)'';  
    }    
  });

Puede encontrar este ejemplo de trabajo que acabo de construir aquí: http://codepen.io/leonardfactory/pen/MwPBjZ

Lo he probado en un safari móvil, y funciona bien, permitiendo arrastrar y soltar. Puedes encontrar más documentación en su página doc .

Espero que esto responda a su pregunta, si sus necesidades son más específicas, no dude en comentar y trataré de editar mi respuesta para adaptarla.

Answer 3

No estoy seguro de si esto es lo que necesita, pero eche un vistazo a este jquery-ui-touch-punch .

Maneja los eventos táctiles (touchstart, touchmove, touchend) para que funcione correctamente.

Eche un vistazo a la demopage, donde puede probarlo en la página de demostración de su dispositivo móvil touchpunch .

Answer 4

Bueno, es posible con un WebView. La respuesta real es: ¿cómo? Cómo, con el fin de obtener un gran resultado de UX. El dispositivo móvil no es un escritorio, la solución real es una cuestión de UX, dedicada al móvil:

Puede usar un truco largo para hacer una carta "volando / lista para arrastrar" (desactivando el desplazamiento). O Use una zona / botón plano en la tarjeta, que los usuarios pueden enganchar para arrastrarla. Pensamientos Debes evitar absolutamente desplazarte y arrastrar ''activado'' al mismo tiempo. Es arrastrar O desplazar, nunca arrastrar Y desplazar.

EDITAR Usted puede utilizar:

• JQuery UI para gestionar el arrastre @ https://jqueryui.com/draggable/

• JQuery Mobile vmouse eventos. (Funciona bien con mousemove , lo mejor). @ https://api.jquerymobile.com/category/events/