【发布时间】：2011-10-08 09:00:08
【问题描述】：
是否有任何修复方法可以使 Jquery-ui 可在基于 Android 或 IOS 的触摸设备上工作？
【问题讨论】：
标签： iphone android ios jquery-ui jquery-ui-sortable
【发布时间】：2011-10-08 09:00:08
【问题描述】：
我建议jQuery UI Touch Punch。我已经在 iOS 5 和 Android 2.3 上对其进行了测试，并且两者都运行良好。
【讨论】：
-
实际上，这是唯一对我有用且没有任何问题的解决方案。
-
我实际上在使用触摸打孔时遇到了问题。在 div 上激活 draggable 和 resizabble 后，在停用默认浏览器触摸事件（捏缩放、滑动以移动屏幕等）后，如果它们触摸曾经可调整大小或可拖动的 div 区域，则事件将不再起作用。跨度>
-
像魅力一样工作
The other answer 很棒，但不幸的是它只能在 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 );
【讨论】：
-
太棒了，这似乎有效。尽管
Line 62: (TypeError: Result of expression 'event.originalEvent' [undefined] is not an object我确实在 ipad 中遇到了一些控制台错误，但它似乎仍然有效。我看看能不能修复那个js错误 -
此代码有效，但它与常规点击冲突（例如对话框的确定按钮）。是否可以仅在用户将手指在项目上保持 500 毫秒时才执行可拖动？
-
@Mike - 这听起来像是我也遇到的问题。我发现只需在上面的代码中删除对
return false的调用，就可以让点击事件在对话框上正常工作 -
@asgeo1 是的，这解决了问题。他们继续使用
return false，它并没有像大多数人认为的那样。 -
在 sortable 上使用句柄选项时，这对我来说很糟糕。我使用 _mouseCapture 事件对其进行了修补。我的更改位于gist.github.com/2416927
这是要替换 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 );
【讨论】：
我终于找到了一个适用于拖动手柄的解决方案。
- 转到this page。
- 在“下载”中，获取“altfix”版本，该版本仅对您指定的元素应用触摸处理。
- 为下载的JS文件添加脚本标签。
- 在文档就绪处理程序中为拖动手柄添加触摸处理；例如
$('.handle').addTouch()
【讨论】：
我将下面的这个 sn-p 与 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 );
【讨论】：
这对我来说比选择的答案好得多，所以我希望这对其他人有帮助：
http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115.
其他代码的行为很奇怪，当你拖动一个元素时，潜在的放置位置离它应该的位置很远。
【讨论】：