Jquery-ui sortable doesn't work on touch devices based on Android or IOS

前端 未结 6 1205
盖世英雄少女心
盖世英雄少女心 2020-12-01 02:30

Is there any fix to make Jquery-ui sortable work on touch devices based on Android or IOS?

6条回答
  •  青春惊慌失措
    2020-12-01 02:59

    is this meant to replace the mouse.ui js code or to be called after that javascript is loaded? I am unable to get it to work for me on an Android tablet.

    EDIT for anyone finding this in the future - got this to work for a Samsung Galaxy Android tablet with the following code:

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

提交回复
热议问题