使用jQuery UI可以在触摸屏设备上排序什么？

这个超简单的解决方案.我希望我可以说这是超级简单的找到,但没有…花了一段时间.

为了澄清症状,这是最初被拖动的元素总是在后续拖动中被拖动的元素.如果你开始拖动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($) {

因为它没有正确的空间,你应该包括对iPod touch的支持.