javascript - body - title css
Arrastre y suelte HTML en dispositivos móviles (7)
Cuando agrega arrastrar y soltar a una página web usando JavaScript, como jQuery UI, se puede arrastrar y soltar, cómo funciona esto cuando se lo visualiza 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:
Tenga un botón para dispositivos móviles que "levante" el artículo que se va a arrastrar y luego haga que haga clic en la zona en la que desea soltar el elemento.
¡Escribe una aplicación que haga esto para dispositivos móviles en lugar de intentar que la página web funcione en ellos!
Tus sugerencias y comentarios por favor.
ACTUALIZACIÓN: Bounty
Si alguien puede decirme cómo arrastrar y soltar el trabajo en una página web en un dispositivo móvil, sin recurrir a los puntos 1 y 2 anteriores, ¡le daré una maravillosa recompensa de 50 rep a su manera!
Existe un nuevo relleno sintético para traducir eventos táctiles a drag-and-drop, de modo que HTML5 Drag And Drop se puede usar en dispositivos móviles.
El polyfill fue presentado por Bernardo Castilho en esta publicación .
Aquí hay una demo de esa publicación.
La publicación también presenta varias consideraciones del diseño folyfill.
Jquery Touch Punch es genial, pero lo que también hace es deshabilitar todos los controles en el div que se puede arrastrar, así que para evitar esto debes modificar las líneas ... (en el momento de escribir, 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'') {
agrega tantos ors como quieras para cada uno de los elementos que deseas ''desbloquear''
Espero que ayude a alguien
La versión beta de Sencha Touch tiene soporte para arrastrar y soltar.
Puede consultar su Ejemplo DnD . 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 de ejemplo original está muerto, pero encontré esta alternativa:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch
Más vale que intentes con el colofón de arrastrar y soltar de Tim Ruffle , ciertamente similar al de Bernardo Castilho (ver la respuesta de @remdevtec).
Simplemente haga npm install mobile-drag-drop --save (otros métodos de instalación disponibles, p. Ej. Con bower)
Luego, cualquier interfaz de elemento que dependa de la detección táctil debería funcionar en dispositivos móviles (por ejemplo, arrastrando solo un elemento, en lugar de desplazarse + arrastrar al mismo tiempo).
Necesitaba crear una función de arrastrar y soltar + rotación que funciona en computadoras de escritorio, dispositivos móviles, tabletas y teléfonos con Windows. El último lo hizo más complicado (mspointer vs. touch events).
La solución vino de la gran biblioteca Greensock
Se necesitaron algunos saltos a través de aros para hacer el mismo objeto arrastrable y giratorio, pero funciona perfectamente
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'');
}
});
jQuery UI Touch Punch lo resuelve todo.
Es un soporte de evento táctil 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. Usé jQuery UI ordenable y funciona como un encanto.