[英]Jquery-ui sortable doesn't work on touch devices based on Android or IOS
Is there any fix to make Jquery-ui sortable work on touch devices based on Android or IOS?是否有任何修复方法可以使 Jquery-ui 在基于 Android 或 IOS 的触摸设备上工作?
I suggest jQuery UI Touch Punch .我建议jQuery UI Touch Punch 。 I've tested it on iOS 5 and Android 2.3 and it works great on both.我已经在 iOS 5 和 Android 2.3 上对其进行了测试,并且在两者上都运行良好。
The other answer is great but unfortunately it will only work on iOS devices. 另一个答案很好,但不幸的是它只适用于 iOS 设备。
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.还有一个由 jquery.ui 的更高版本引起的损坏,这意味着 _touchEnd 事件没有正确重置 mouse.ui 中的内部标志 (mouseHandled),这导致了异常。
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 );
I finally found a solution that works with drag handles.我终于找到了一个适用于拖动手柄的解决方案。
$('.handle').addTouch()
例如$('.handle').addTouch()
I'm using this snippet below in conjunction with jquery-sortable which does allow the drag sort to happen on my iPhone.我将下面的这个片段与 jquery-sortable 结合使用,它允许在我的 iPhone 上进行拖动排序。 I am having a problem after I finish the first sort however as any scrolling on the list at all is detected as a drag.我在完成第一次排序后遇到问题,但是因为列表上的任何滚动都被检测为拖动。
EDIT - see here as well http://bugs.jqueryui.com/ticket/4143 EDIT 2 - I was able to get this working if I use the entire row as the handle.编辑 - 也见这里http://bugs.jqueryui.com/ticket/4143编辑 2 - 如果我使用整行作为句柄,我能够得到这个工作。 It also fixed a problem I was having where the offset was incorrect after scrolling.它还解决了我在滚动后偏移不正确的问题。
/*
* 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 );
is this meant to replace the mouse.ui js code or to be called after that javascript is loaded?这是要替换 mouse.ui js 代码还是在加载 javascript 后调用? I am unable to get it to work for me on an Android tablet.我无法让它在 Android 平板电脑上为我工作。
EDIT for anyone finding this in the future - got this to work for a Samsung Galaxy Android tablet with the following code:为将来发现此问题的任何人进行编辑-使其适用于具有以下代码的三星 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 worked a lot better for me than the selected answer, so I hope this helps other people:这对我来说比选择的答案好得多,所以我希望这对其他人有帮助:
http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115 . http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115 。
The other code behaves weird, when you drag an element the potential dropping position is very far from were it should be.另一个代码的行为很奇怪,当你拖动一个元素时,position 的潜在下降距离应该是很远。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.