1

phonegap を使用して開発された Android アプリケーションで、jquery-ui を使用してドラッグ アンド ドロップ機能を実装しています。すべてが正常に機能しています。jquery.ui.touch-punch.jsタッチイベントに使用しました。問題は、Android タブレットでタッチしてドラッグしているときにヘルパーを取得できないことです。ヘルパーはデスクトップ ブラウザーで正常に動作します。

4

2 に答える 2

4

これが実際の例です：http：//jsfiddle.net/Gajotres/rjC9q/

Android4.1.1とiPad6.0でテストしました。

それを機能させるには、次のコードも追加する必要があります。

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

私はこのコードの作者ではありません。OlegSlobodskoiです。

于 2013-03-06T13:21:09.837 に答える
0

jquery-uijquery-mobileで?? とんでもない！jquery-uiモバイル デバイス用に最適化されていません。したがって、スムーズに実行されるとは思わないでください。

次のような他のライブラリを検討する必要がある場合があります。

于 2013-03-06T11:55:30.403 に答える