触摸屏设备上的 jQuery UI Sortable 发生了什么？

Question

我正在使用 jQuery UI Sortable。

我正在开发一个仅限移动设备的网站，因此我研究了如何将触摸事件映射到鼠标事件以使其工作，并最终使用了一些 Oleg Slobodskoi 的代码。

这看起来效果很好。但是，在移动设备上（我使用 iPhone 进行测试，但它也会发生在 iPhone 模拟器上），当您尝试移动第二个项目（即已经排序了一个项目后要排序的下一个项目）时，它的初始值位置向两侧偏移大约元素的宽度。

^{当我第二次尝试拖动这些粉色框之一时，而不是出现在我的手指下方并移动有了它，它开始大约一个盒子的宽度，向左或向右，然后跳到我的手指下。}

我已经设置了一个jsFiddle 上的示例。点击附加按钮将 jQuery Sortable 添加到列表项。

我尝试了很多方法，包括使用 change 事件并尝试将其重新调整回来，但我无法让它可靠地工作。

我怎样才能阻止这个问题？

Answer 1

这个解决方案超级简单。我希望我能说它非常容易找到，但不……花了一段时间。

为了澄清这一症状，最初拖动的元素始终是后续拖动中被拖动的元素。如果您一开始拖动 b，则在后续拖动中，b 始终会移动。对于a 和c 也是如此。

这让我怀疑这个事件是否被“回收”了。我确认 touchstart（和 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 仅在小部件本身上调用 - 而不是在 document 上调用！因此，显然 mouseHandled 从未被重置。因此，我向 _touchEnd 添加了一个 document 调度行：

_touchEnd: function(event) {
   this.element.unbind("touchmove." + this.widgetName).unbind("touchend." + this.widgetName);
   this._mouseUp(event);
   $(document).trigger('mouseup', event);
}, 

很快，一切正常。

所以，总而言之，这一行是最神奇的：

$(document).trigger('mouseup', event);

工作分叉小提琴这里 [用于 iOS 查看的直接链接]。

---

注意：我还更改了这一行：

/ iPad | iPhone /.test(navigator.userAgent) && (function($) {

至：

/iPad|iPhone|iPod/.test(navigator.userAgent) && (function($) {

因为它不能正常使用空格，并且您应该包括对 iPod touch 的支持。

Answer 2

还有一件更重要的事情。
一切都很好，但前提是我们不向下滚动页面。
问题是 Y 触摸位置是相对于窗口顶部的，而不是相对于文档的。
我已经解决了这个问题，更改了行：

event.pageY = target.clientY;

改为：

event.pageY = target.clientY + $(window).scrollTop();