触摸设备上的 jQuery UI 滑块

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

问题的元素是由 jQuery UI 定义的滑块和范围滑块; 在触摸屏上，不是将触摸记录为拾取一个手柄，而将拖动记录为在滑块上拖动手柄，它只是将整个网页滑动到屏幕的一侧。它确实工作，如果你点击手柄，然后点击滑块上的位置，你希望手柄结束，但这是非常缓慢，并不理想。有什么想法吗？

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

更新: 我在 jQueryUI 网站上发现了这个“补丁”

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

说它促进了 iPhone 上的滑块，但现在有另一个问题: 我如何将这个“补丁”合并到我的代码中？我是否只是像插件一样把它包含在代码的开头？

90256 次浏览
小开

This library seems to offer what you're looking for:

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

It also has some example use code (simply add the plugin):

<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>
小开

Just wanted to add some new info about this. Touch-punch will work fine for Ipads and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch)

The fix is quite simple, just add the following CSS-rules to the .ui-slider-handle:

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

Hope this helps

小开

As @dazbradbury suggested, the touchpunch library can help translate the mouse events to touch events. The parameters in .draggable() limit the movement of the slider so it can't be moved beyond its slider parent. 

<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>

EDIT: If you are already using a Jquery UI slider, you only need to include the touchpunch library. Do not call .draggable() for the .ui-slider-handle because it will overwrite the existing functionality.

小开

I had the same problem. I developed an elaborate slider UI building on jQuery UI's slider only to realize it doesn't work at all on mobile. I tried the suggestions listed here but since I have a custom solution that's only based on jQuery UI Slider, it did not work.

Just use noUiSlider.

It does all the elaborate features (and much more) as the one I built on top of jQuery UI slider. It works beautifully on mobile devices and is easy to style too.


提交答案