Сортируемая Jquery-UI не работает на сенсорных устройствах на базе Android или IOS - PullRequest
24 голосов
/ 19 июля 2011

Есть ли какое-нибудь исправление, чтобы сортировка Jquery-ui работала на сенсорных устройствах на базе Android или IOS?

Ответы [ 6 ]

32 голосов
/ 13 мая 2012

Я предлагаю JQuery UI Touch Punch .Я протестировал его на iOS 5 и Android 2.3, и он отлично работает на обоих.

26 голосов
/ 22 августа 2011

Другой ответ великолепен, но, к сожалению, он будет работать только на устройствах iOS.

Также был сбой, вызванный более поздними версиями jquery.ui, который означал, что события _touchEnd не корректно сбрасывали внутренний флаг (mouseHandled) в mouse.ui, и это вызывало исключения.

Обе эти проблемы теперь должны быть исправлены с помощью этого кода.

/*
 * 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 );
3 голосов
/ 18 октября 2011

Я наконец нашел решение, которое работает с ручками перетаскивания.

  1. Перейти на эту страницу .
  2. В разделе «Загрузки» выберите версию «altfix», которая применяет обработку касаний только к указанным элементам.
  3. Добавить тег сценария для загруженного файла JS.
  4. Добавить сенсорную обработку для ваших ручек перетаскивания в обработчике документа готов; например $('.handle').addTouch()
2 голосов
/ 30 сентября 2011

это предназначено для замены js-кода mouse.ui или для вызова после загрузки этого javascript? Я не могу заставить его работать на меня на планшете Android.

РЕДАКТИРОВАТЬ для всех, кто найдет это в будущем - это работает на планшете Samsung Galaxy Android со следующим кодом:

    /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 );
2 голосов
/ 22 июля 2011

Я использую этот фрагмент ниже вместе с jquery-sortable, который позволяет сортировке перетаскивания происходить на моем iPhone. Однако после завершения первой сортировки у меня возникла проблема, поскольку любая прокрутка в списке вообще определяется как перетаскивание.

РЕДАКТИРОВАТЬ - см. Также здесь http://bugs.jqueryui.com/ticket/4143 РЕДАКТИРОВАТЬ 2 - я смог заставить это работать, если я использую весь ряд в качестве ручки. Это также устранило проблему, которая возникала из-за неправильного смещения после прокрутки.

/*
 * 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 );
1 голос
/ 23 ноября 2012

Это сработало для меня намного лучше, чем выбранный ответ, поэтому я надеюсь, что это поможет другим людям:

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

Другой код ведет себя странно, когда вы перетаскиваете элемент, потенциальная позиция отбрасывания очень далека от того, где он должен быть.

...