是否有任何修复使Jquery-ui可排序的工作在触摸设备基于Android或IOS?
utugiqy61#
我建议使用jQuery UI Touch Punch,我已经在iOS 5和Android 2.3上测试过了,它在两个系统上都很好用。
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 );
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 );
vlju58qv4#
我终于找到了一个解决方案,工程与拖动句柄。1.转到this page。1.在下载中,获取“altfix”版本,它只对您指定的元素应用触摸处理。1.为下载的JS文件添加脚本标签。1.在文档就绪处理程序中为拖动手柄添加触摸处理;例如$('.handle').addTouch()
$('.handle').addTouch()
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 );
bmp9r5qi6#
这比我选择的答案更有效,所以我希望这对其他人有帮助:http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115。另一段代码的行为很奇怪,当你拖动一个元素时,潜在的放置位置离它应该在的位置很远。
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和其他触控移动的设备上进行了测试。
7条答案
按热度按时间utugiqy61#
我建议使用jQuery UI Touch Punch,我已经在iOS 5和Android 2.3上测试过了,它在两个系统上都很好用。
jdg4fx2g2#
另一个答案是伟大的,但不幸的是,它只会在iOS设备上工作。
此外,jquery.ui的更新版本还导致了一个中断,这意味着_touchEnd事件没有正确地重置mouse.ui中的内部标志(mouseHandled),这导致了异常。
这两个问题现在都应该用这段代码解决了。
ifsvaxew3#
这是为了替换mouse.ui js代码还是在加载JavaScript后调用?我无法让它在Android平板电脑上为我工作。
编辑为任何人发现这在未来-得到了这个工作的三星Galaxy Android平板电脑与以下代码:
vlju58qv4#
我终于找到了一个解决方案,工程与拖动句柄。
1.转到this page。
1.在下载中,获取“altfix”版本,它只对您指定的元素应用触摸处理。
1.为下载的JS文件添加脚本标签。
1.在文档就绪处理程序中为拖动手柄添加触摸处理;例如
$('.handle').addTouch()
zengzsys5#
我将下面的代码片段与jquery-sortable结合使用,jquery-sortable允许在我的iPhone上进行拖动排序。在完成第一次排序后,我遇到了一个问题,因为列表上的任何滚动都被检测为拖动。
编辑-请参阅这里以及http://bugs.jqueryui.com/ticket/4143编辑2 -我能够得到这个工作,如果我使用整个行作为句柄。它还修复了一个问题,我有偏移是不正确的滚动后。
bmp9r5qi6#
这比我选择的答案更有效,所以我希望这对其他人有帮助:
http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115。
另一段代码的行为很奇怪,当你拖动一个元素时,潜在的放置位置离它应该在的位置很远。
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和其他触控移动的设备上进行了测试。