的jQuery UI排序不基于Android或IOS触摸设备工作 [英] Jquery-ui sortable doesn't work on touch devices based on Android or IOS

问题描述

有没有修复，使基于Android或IOS上的触摸设备的jQuery用户界面可排序的工作？

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

推荐答案

<一个href="http://stackoverflow.com/questions/6745098/jquery-ui-sortable-doesnt-work-on-touch-devices-based-on-android-or-ios/7612258#7612258">The对方的回答是伟大的，但不幸的是它只能在iOS设备上。

The other answer is great but unfortunately it will only work on iOS devices.

也有是由更高版本jquery.ui这意味着_touchEnd事件没有被正确地重置在mouse.ui一个内部标志（mouseHandled），这是造成异常破损。

Also there was is a breakage caused by later versions of jquery.ui that meant that _touchEnd events were not correctly resetting an internal flag (mouseHandled) in mouse.ui and this was causing exceptions.

这两个问题现在应该修复了这个code。

Both of these problems should now be fixed with this code.

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

这篇关于的jQuery UI排序不基于Android或IOS触摸设备工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！