我正在开发一个仅限手机的网站,所以我环顾四周如何将触摸事件映射到鼠标事件,以使其工作,最终使用了code by Oleg Slobodskoi.
这似乎很好地工作.然而,在移动设备上(我正在使用iPhone进行测试,但也会发生在iPhone模拟器上),当您尝试移动第二个项目(即,在您已经排序一个之后的下一个项目排序)时,其初始位置两侧偏离了元素的宽度.
当我第二次尝试拖动其中一个粉红色的盒子,而不是出现在我的手指下方并随之移动时,它会从左边或右边开始一个方块的宽度,然后跳到我的手指下方.
我设置了一个example on jsFiddle.点击附加按钮添加jQuery可排序列表项.
我尝试了许多事情,包括玩改变事件,并尝试重新对齐,但我无法得到可靠的工作.
我该如何阻止这个问题？
解决方法
为了澄清症状,这是最初被拖动的元素总是在后续拖动中被拖动的元素.如果你开始拖动b,在随后的拖动中,b是一直被移动的拖动.同样对于a和c.
这让我怀疑事件是否被“回收”.我确认在touchstate(和touchmove)事件上的pageX和pageY值是正确的,但是在Sortable中到_mouseDown的值是错误的.所以,我去了jquery.ui.mouse.js,看着那里的_mouseDown.我确认正确的值正在通过,但处理程序正在方法顶部的这一行退出：
// don't let more than one widget handle mouseStart
if( mouseHandled ) { return };
所以,我开始看着mouseHandled.只有一行被重置为false – 以下听众在顶部：
$( document ).mouseup( function( e ) {
mouseHandled = false;
});
我意识到我一定很接近我回头看看你使用的兼容性插件中的_touchEnd方法：
_touchEnd: function(event) {
this.element.unbind("touchmove." + this.widgetName).unbind("touchend." + this.widgetName);
this._mouseUp(event);
},
请注意,_mouseUp仅在窗口小部件本身上调用,而不是文档！因此,显然mouseHandled从未被重置.所以,我向_touchEnd添加了一个文档调度行：
_touchEnd: function(event) {
this.element.unbind("touchmove." + this.widgetName).unbind("touchend." + this.widgetName);
this._mouseUp(event);
$(document).trigger('mouseup',event);
},
和presto,一切正常.
所以,总而言之,这一行是神奇的：
$(document).trigger('mouseup',event);
工作叉子here [direct link for iOS viewing].
注意：我也改了这一行：
/ iPad | iPhone /.test(navigator.userAgent) && (function($) {
至：
/iPad|iPhone|iPod/.test(navigator.userAgent) && (function($) {
