触摸设备上的 jQuery UI 滑块答案

【问题标题】：jQuery UI sliders on touch devices触摸设备上的 jQuery UI 滑块
【发布时间】：2011-09-15 15:47:58
【问题描述】：

我正在使用 jQuery UI 开发一个网站，我的网站上有几个元素在触摸屏设备上查看时似乎不兼容；它们不会导致任何错误，但行为不是应该的。

有问题的元素是 jQuery UI 定义的滑块和范围滑块；在触摸屏上，它不会将触摸注册为拿起手柄，将拖动注册为将手柄拖过滑块，它只是将整个网页滑动到屏幕的一侧。如果您点击手柄然后点击滑块上您希望手柄结束的位置，它确实有效，但这非常慢且不理想。有什么想法吗？

我尝试下载 jqtouch 插件，然后将.touch([...]) 附加到对slider() 和rangeslider() 的所有调用，但这不起作用。

谢谢！

更新：我在 jQuery UI 网站上找到了这个“补丁”

http://bugs.jqueryui.com/ticket/4143

这表示它有助于 iPhone 上的滑块，但现在要问另一个愚蠢的问题：如何将这个“补丁”合并到我的代码中？我是否像插件一样将它包含在代码的开头？

【问题讨论】：

标签： slider touch jqtouch

【解决方案1】：

这个库似乎提供了你正在寻找的东西：

https://github.com/furf/jquery-ui-touch-punch#readme

它还有一些示例使用代码（只需添加插件）：

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

【讨论】：

大众注意：将其连接到滑块手柄上，而不是全部。（对于 jQuery 滑块，$('.ui-slider-handle').draggable();
现在我可以在整个页面上移动滑块手柄了！！这太荒谬了。
我可以在 Firefox Mac 的整个页面上移动句柄。我想知道我们是否需要放置一个条件 if(ipad|iphone) ... 然后 draggable()。
在上面划掉我原来的评论。只需将此插件包含在 HEAD 中即可。通过不添加 $(selector).draggable(); 添加
您只需要包含触摸打孔脚本即可。就像@JoeHyde 在他的第二条评论中所说，没有必要在任何元素上调用 .draggable() 。只需包含脚本，它应该可以工作。

【解决方案2】：

只是想添加一些关于此的新信息。 Touch-punch 适用于 Ipad 和 Android 设备。但是滑块在 Windows 移动设备上不起作用，据我所知（使用最新版本的 jquery ui 和 Touch punch）

修复很简单，只需将以下 CSS 规则添加到 .ui-slider-handle：

-ms-touch-action: none;
touch-action: none;

希望对你有帮助

【讨论】：

不适合我？任何示例链接请@Stijn_d
呃，但这会破坏实际触摸打孔的功能
这解决了我的问题。谢谢！
我也不在带触摸屏的戴尔笔记本电脑上工作jsfiddle.net/jhtcqbqo
我正在使用一个标准的 HTML 滑块，在 Android 手机上查看时非常缓慢且不稳定。添加touch-action: none; 立即消除了这种滞后。因此，这既是感谢，也是对将来遇到相同问题的任何人的说明：带有自定义 CSS 的不稳定或滞后的 HTML 滑块可能会受益于此属性。

【解决方案3】：

正如@dazbradbury 所建议的，touchpunch 库可以帮助将鼠标事件转换为触摸事件。 .draggable() 中的参数限制了滑块的移动，因此它不能移动到其父滑块之外。

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

编辑：如果您已经在使用Jquery UI slider，则只需包含 touchpunch 库。不要为 .ui-slider-handle 调用 .draggable()，因为它会覆盖现有功能。

【讨论】：

这让它对我有用。现在唯一的问题是背景区域（设置范围：“min”时）不服从滑块位置。

【解决方案4】：

我遇到了同样的问题。我在 jQuery UI 的滑块上开发了一个精心制作的滑块 UI，只是意识到它在移动设备上根本不起作用。我尝试了此处列出的建议，但由于我有一个仅基于 jQuery UI Slider 的自定义解决方案，因此它不起作用。

只需使用noUiSlider。

它完成了我在 jQuery UI 滑块之上构建的所有精细功能（以及更多功能）。它可以在移动设备上完美运行，并且也易于设计。

【讨论】：