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

是否有任何解决办法使Jquery-ui可以在基于Android或IOS的触摸设备上进行排序?

Solutions Collecting From Web of "Jquery-ui sortable不适用于基于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 ); 

我建议使用jQuery UI Touch Punch 。 我已经在iOS 5和Android 2.3上测试过,它在两者上都很棒。

我终于find了一个适用于拖动手柄的解决方案。

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

我正在使用下面的这个片段与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 ); 

这是否意味着要替换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 ); 

这对我来说比选择的答案好得多,所以我希望这有助于其他人:

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

另一个代码表现得很奇怪,当你拖动一个元素时,潜在的下降位置离应该的位置很远。