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

Posted 2023-05-08

【中文标题】如何让 jQueryUI 拖放与触摸设备一起使用

【英文标题】：How to get jQueryUI drag\drop working with touch devices

【发布时间】：2012-12-06 02:22:35

【问题描述】：

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

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

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

【问题讨论】：

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

【参考方案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/