42

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

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

我很困惑。有人可以阐明这个问题吗？

4

4 回答 4

76

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

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

于 2012-12-18T20:06:00.130 回答
34

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

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

我们目前正在对所有 jQuery UI 交互进行与设备无关的重写，这将成为 jQuery UI 2.0 的一部分。在此之前，您可以使用jQuery UI Touch Punch。

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

于 2012-12-18T20:11:15.870 回答
0

查看jQTouch

它是一个 jQuery 插件，有助于弥合桌面和触摸设备之间的事件差距。

于 2012-12-18T19:59:34.370 回答
0

使用 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/

于 2021-10-10T05:06:13.490 回答