Jquery-uisorting不适用于基于Android或IOS的触摸设备

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

Solutions Collecting From Web of "Jquery-uisorting不适用于基于Android或IOS的触摸设备"

另一个答案很好,但不幸的是它只能在iOS设备上运行。

此外,还有一个由jquery.ui的后续版本引起的断裂,这意味着_touchEnd事件不正确重置mouse.ui中的内部标志(mouseHandled),这是导致exception。

这两个问题现在应该用这个代码解决。

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

我build议jQuery UI触摸打孔 。 我已经在iOS 5和Android 2.3上进行了testing,并且在两者上都很好。

我终于find了一个解决scheme,与拖动手柄。

  1. 转到此页面 。
  2. 在“下载”中,获取“altfix”版本,该版本仅将触摸处理应用于指定的元素。
  3. 为下载的JS文件添加一个脚本标记。
  4. 在您的文件准备处理程序中为您的拖动手柄添加触摸处理; 例如$('.handle').addTouch()

这是否意味着replacemouse.ui js代码或在JavaScript加载后调用? 我无法在Android平板电脑上为我工作。

编辑任何人在未来find这个 – 得到这个工作的三星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 ); 

我将下面的代码片段与jquery-sortable结合使用,它可以在我的iPhone上进行拖动sorting。 我在完成第一个sorting后遇到了问题,但任何列表中的任何滚动都被检测为拖动。

编辑 – 看到这里以及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 ); 

这对我来说比select的答案更好,所以我希望这可以帮助其他人:

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

其他代码performance怪异,当你拖动一个元素的时候,潜在的放置位置应该是非常远的。