Jquery-ui sortable无法在基于Android或IOS的触控设备上运行

kgqe7b3p  于 2022-12-02  发布在  Android
关注(0)|答案(7)|浏览(188)

是否有任何修复使Jquery-ui可排序的工作在触摸设备基于Android或IOS?

utugiqy6

utugiqy61#

我建议使用jQuery UI Touch Punch,我已经在iOS 5和Android 2.3上测试过了,它在两个系统上都很好用。

jdg4fx2g

jdg4fx2g2#

另一个答案是伟大的,但不幸的是,它只会在iOS设备上工作。
此外,jquery.ui的更新版本还导致了一个中断,这意味着_touchEnd事件没有正确地重置mouse.ui中的内部标志(mouseHandled),这导致了异常。
这两个问题现在都应该用这段代码解决了。

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

ifsvaxew3#

这是为了替换mouse.ui js代码还是在加载JavaScript后调用?我无法让它在Android平板电脑上为我工作。
编辑为任何人发现这在未来-得到了这个工作的三星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 );
vlju58qv

vlju58qv4#

我终于找到了一个解决方案,工程与拖动句柄。
1.转到this page
1.在下载中,获取“altfix”版本,它只对您指定的元素应用触摸处理。
1.为下载的JS文件添加脚本标签。
1.在文档就绪处理程序中为拖动手柄添加触摸处理;例如$('.handle').addTouch()

zengzsys

zengzsys5#

我将下面的代码片段与jquery-sortable结合使用,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 );
bmp9r5qi

bmp9r5qi6#

这比我选择的答案更有效,所以我希望这对其他人有帮助:
http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115
另一段代码的行为很奇怪,当你拖动一个元素时,潜在的放置位置离它应该在的位置很远。

camsedfj

camsedfj7#

使用Touch Punch非常简单,只需按照以下简单的步骤在jQuery UI应用中启用触摸事件:
在页面上包含jQuery和jQuery UI。
在jQuery UI之后和第一次使用之前包含Touch Punch。
请注意,如果您使用的是jQuery UI的组件,则必须在jquery.ui.mouse.js之后包含Touch Punch,因为Touch Punch会修改其行为。
没有3.只需像预期的那样使用jQuery UI,看着它在手指的触摸下工作。
"#widget ').可拖动的();
在iPad、iPhone、Android和其他触控移动的设备上进行了测试。

相关问题