如何让 jQueryUI 拖放与触摸设备一起使用答案

【问题标题】：How to get jQueryUI drag\drop working with touch devices如何让 jQueryUI 拖放与触摸设备一起使用
【发布时间】：2012-12-06 02:22:35
【问题描述】：

在这种情况下，我希望有人回复告诉我我是个白痴。但我仍然对 jQueryUI 拖放无法在触摸设备上使用感到惊讶。我还没有测试过它们，但我在去年尝试过 iphone\ipad\android 2、3&4 并且什么都没有。刚刚在新的 Android 上尝试了最新版本。依然没有。不信，只需访问移动设备上的演示页面并尝试使用拖放示例。什么都没有。

这里是否存在技术问题或核心不兼容？一个如此简单以至于不值得写的修复？ jQuery 开发人员不使用移动设备吗？我在 Stack Overflow 上到处都看到过“修复”，但它们都是“黑客”，而且我尝试过的所有方法都不起作用。

我很困惑。有人能解释一下这个问题吗？

【问题讨论】：

我认为这更多的是目标受众的问题。 jQuery UI 最初并不是为处理移动设备而编写的。它甚至不能很好地与 jQuery Mobile 配合使用。它的某些部分可能仍然在移动设备上运行良好，但任何与拖动有关的东西都会失败。

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

如果您只想让当前的 jQuery UI 代码处理触摸事件，您可以使用 jQuery UI Touch Punch 猴子补丁。

唯一的“技术问题或核心不兼容”是 jQuery UI (1.x) 仅侦听鼠标事件，而不是触摸事件（有关历史原因，请参阅 @ScottGonzales 的回复）。上面的 jQuery touch punch 做出了这种改变。您甚至可以尝试该页面上的一些 jQuery UI 示例，它们都可以工作。一般来说，使用 Touch Punch 是目前公认的解决方案。

【讨论】：

“Touch Punch 猴子补丁”的声音
不是最好的解决方案：如果要拖动的元素占据整个视口，使用 jQuery UI Touch Punch 会阻止文档滚动。甚至可能是您希望仅水平拖动的元素的问题，其中容器隐藏溢出，作为可拖动的轮播。在这种情况下，轮播会阻止用户上下滚动文档。我更喜欢 jQuery Touch (github.com/ajlkn/jquery.touch)，它使得可拖动可能仅在移动设备上触摸（鼠标手势可以被过滤）并且不会阻止触摸事件传播（因此，要滚动的文档）。
@MaxAuray 您的评论将成为这个问题的绝佳替代答案！请注意 jquery.touch 在 2012 年不存在，当时我最初回答了这个 >_

【解决方案2】：

jQuery UI 不支持触摸设备的原因由来已久，但归结为 Touch Event 是一个非标准的 WebKit 特定实现。当时，未来看起来很凄凉。苹果拥有无人愿意接近的专利；结果，Mozilla 使用从未流行的流实现了自己的触摸事件系统。目前尚不清楚微软和 Opera 会做什么。 Paul Bakaus（jQuery UI 的创建者）wanted to land iPhone support 4 years ago。我想等待官方标准。

时间过去了，Mozilla 放弃了他们的触摸事件，微软实现了他们自己的指针事件系统。 W3C 成立了一个工作组来标准化触控事件并调查 Apple 专利。触摸事件工作组已发布建议并解散。微软最终提交了一个标准化指针事件的提案，现在有一个 W3C 指针事件工作组。

我们目前正在处理所有 jQuery UI 交互的device-agnostic rewrite，它将成为 jQuery UI 2.0 的一部分。在此之前，您可以使用jQuery UI Touch Punch。

今年早些时候，我写了一些关于触控事件的历史，以及为什么指针事件提供了一个更美好的未来。您可以在jQuery blog 上了解它。

【讨论】：

不是最好的解决方案：如果要拖动的元素占据整个视口，使用 jQuery UI Touch Punch 会阻止文档滚动。甚至可能是您希望仅水平拖动的元素的问题，其中容器隐藏溢出，作为可拖动的轮播。在这种情况下，轮播会阻止用户上下滚动文档。我更喜欢 jQuery Touch (github.com/ajlkn/jquery.touch)，它使得可拖动可能仅在移动设备上触摸（鼠标手势可以被过滤）并且不会阻止触摸事件传播（因此，要滚动的文档）。

【解决方案3】：

查看jQTouch

这是一个 jQuery 插件，可帮助弥合桌面设备和触控设备之间的事件差距。

【讨论】：

似乎已停产，请查看 jQuery Touch (github.com/ajlkn/jquery.touch)。

【解决方案4】：

使用 jQuery UI Touch Punch 似乎是最好的方法。

<script src="../jquery-ui-1.13.0/external/jquery/jquery.js"></script>
<script src="../jquery-ui-1.13.0.custom/jquery-ui.min.js"></script>
<script src="../jquery-ui-1.13.0/jquery-ui.min.js"></script>
<script src="../jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

<link href="../bootstrap-5.1.1/css/bootstrap.min.css" rel="stylesheet" />

<script>
    $(function () {
        $("#sortable").sortable();
    });
</script>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ul id="sortable" class="list-group">
                <li class="list-group-item active">Item 1</li>
                <li class="list-group-item">Item 2</li>
                <li class="list-group-item">Item 3</li>
                <li class="list-group-item">Item 4</li>
                <li class="list-group-item">Item 5</li>
                <li class="list-group-item">Item 6</li>
                <li class="list-group-item">Item 7</li>
                <li class="list-group-item">Item 8</li>
            </ul>
        </div>
    </div>
</div>

https://jsfiddle.net/igorkrupitsky/cw5n0xku/1/

【讨论】：