pantalla - no funciona el touch de mi iphone 4s

Jquery-ui ordenable no funciona en dispositivos táctiles basados en Android o IOS

Question

¿Hay alguna solución para hacer que Jquery-ui trabaje en dispositivos táctiles basados ​​en Android o IOS?

Answer 1

¿Esto tiene la intención de reemplazar el código mouse.ui js o ser llamado después de que javascript esté cargado? No puedo hacer que funcione en una tableta Android.

EDIT para cualquier persona que encuentre esto en el futuro: esto funcionó para una tableta Samsung Galaxy con el siguiente código:

    /iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {

var proto =  $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;

$.extend( proto, {
    _mouseInit: function() {
        this.element
        .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
        _mouseInit.apply( this, arguments );
    },

    _touchStart: function( event ) {
        /* if ( event.originalEvent.targetTouches.length != 1 ) {
            return false;
        } */

        this.element
        .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
        .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

        this._modifyEvent( event );

        $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
        this._mouseDown( event );

        //return false;           
    },

    _touchMove: function( event ) {
        this._modifyEvent( event );
        this._mouseMove( event );   
    },

    _touchEnd: function( event ) {
        this.element
        .unbind( "touchmove." + this.widgetName )
        .unbind( "touchend." + this.widgetName );
        this._mouseUp( event ); 
    },

    _modifyEvent: function( event ) {
        event.which = 1;
        var target = event.originalEvent.targetTouches[0];
        event.pageX = target.clientX;
        event.pageY = target.clientY;
    }

});

})( jQuery );

Answer 2

Esto funcionó mucho mejor para mí que la respuesta seleccionada, así que espero que esto ayude a otras personas:

http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115 .

El otro código se comporta de manera extraña, cuando arrastra un elemento, la posición potencial de caída está muy lejos de lo que debería ser.

Answer 3

Estoy usando este fragmento a continuación junto con jquery-sortable, que permite que la clasificación de arrastre suceda en mi iPhone. Tengo un problema después de terminar el primer orden, sin embargo, como cualquier desplazamiento en la lista se detecta como un arrastre.

EDITAR - vea aquí también http://bugs.jqueryui.com/ticket/4143 EDIT 2 - Pude hacerlo funcionar si utilizo toda la fila como manejador. También resolvió un problema que tenía cuando el desplazamiento era incorrecto después de desplazarse.

/*
 * A bridge between iPad and iPhone touch events and jquery draggable, sortable etc. mouse interactions.
 * @author Oleg Slobodskoi  
 */
/iPad|iPhone/.test( navigator.userAgent ) && (function( $ ) {

    var proto =  $.ui.mouse.prototype,
        _mouseInit = proto._mouseInit;

    $.extend( proto, {
        _mouseInit: function() {
            this.element
                .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );

            _mouseInit.apply( this, arguments );
        },

        _touchStart: function( event ) {
            if ( event.originalEvent.targetTouches.length != 1 ) {
                return false;
            }

            this.element
                .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
                .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

            this._modifyEvent( event );

            this._mouseDown( event );

            return false;           
        },

        _touchMove: function( event ) {
            this._modifyEvent( event );
            this._mouseMove( event );   
        },

        _touchEnd: function( event ) {
            this.element
                .unbind( "touchmove." + this.widgetName )
                .unbind( "touchend." + this.widgetName );
            this._mouseUp( event ); 
        },

        _modifyEvent: function( event ) {
            event.which = 1;
            var target = event.originalEvent.targetTouches[0];
            event.pageX = target.clientX;
            event.pageY = target.clientY;
        }

    });

})( jQuery );

Answer 4

Finalmente encontré una solución que funciona con controles de arrastre.

1. Ve a esta página
2. En Descargas, tome la versión "altfix", que solo aplica el manejo táctil a los elementos que especifique.
3. Agregue una etiqueta de script para el archivo JS descargado.
4. Agregue manejo táctil para sus manejadores de arrastre en su manejador listo para documentos; por ejemplo $(''.handle'').addTouch()

Answer 5

Sugiero jQuery UI Touch Punch . Lo probé en iOS 5 y Android 2.3 y funciona muy bien en ambos.

Answer 6

La otra respuesta es genial, pero desafortunadamente solo funcionará en dispositivos con iOS.

También hubo una rotura causada por versiones posteriores de jquery.ui que significaba que los eventos _touchEnd no estaban restableciendo correctamente un marcador interno (mouseHandled) en mouse.ui y esto causaba excepciones.

Ambos problemas deberían solucionarse ahora con este código.

/*
 * Content-Type:text/javascript
 *
 * A bridge between iPad and iPhone touch events and jquery draggable, 
 * sortable etc. mouse interactions.
 * @author Oleg Slobodskoi  
 * 
 * modified by John Hardy to use with any touch device
 * fixed breakage caused by jquery.ui so that mouseHandled internal flag is reset 
 * before each touchStart event
 * 
 */
(function( $ ) {

    $.support.touch = typeof Touch === ''object'';

    if (!$.support.touch) {
        return;
    }

    var proto =  $.ui.mouse.prototype,
    _mouseInit = proto._mouseInit;

    $.extend( proto, {
        _mouseInit: function() {
            this.element
            .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
            _mouseInit.apply( this, arguments );
        },

        _touchStart: function( event ) {
            if ( event.originalEvent.targetTouches.length != 1 ) {
                return false;
            }

            this.element
            .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
            .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

            this._modifyEvent( event );

            $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
            this._mouseDown( event );

            return false;           
        },

        _touchMove: function( event ) {
            this._modifyEvent( event );
            this._mouseMove( event );   
        },

        _touchEnd: function( event ) {
            this.element
            .unbind( "touchmove." + this.widgetName )
            .unbind( "touchend." + this.widgetName );
            this._mouseUp( event ); 
        },

        _modifyEvent: function( event ) {
            event.which = 1;
            var target = event.originalEvent.targetTouches[0];
            event.pageX = target.clientX;
            event.pageY = target.clientY;
        }

    });

})( jQuery );