移动设备上的 jQuery UI 滑块触摸和拖放支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13808663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI slider Touch & Drag/Drop support on Mobile devices
提问by Seth
I have already styled and implemented jQuery UI slider into a project. Though it's responsive, the slider does not respond to being touched and dragged. Instead, you have to touch where you want the slider to go. I'd like to avoid swapping to jQuery mobile UI, which supports touching and dragging, since we already extensively use jQuery (non-mobile) UI.
我已经在一个项目中设计并实现了 jQuery UI 滑块。虽然它是响应式的，但滑块不会响应被触摸和拖动。相反，您必须触摸您希望滑块移动的位置。我想避免切换到支持触摸和拖动的 jQuery 移动 UI，因为我们已经广泛使用 jQuery（非移动）UI。
The functionality we want:
Here
What we are using: Here
On a desktop you can't tell the difference. On a mobile device it is apparent.
在台式机上，您无法区分。在移动设备上这是显而易见的。
Anyone know how to add this support to jquery UI?
有人知道如何将此支持添加到 jquery UI 吗？
$("#videographers").slider({
value: 2,
min: 1,
max: 3,
step: 1,
slide: function(event, ui) {
return calcTotal(ui.value);
}
});
回答by username
jQuery ui doesn't have touch support. You should use it with jQuery-ui touch punch.
jQuery ui 没有触摸支持。您应该将它与jQuery-ui touch Punch 一起使用。
Just add the script after jQuery ui:
只需在 jQuery ui 之后添加脚本：
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
You can also use cdnjs:
您还可以使用 cdnjs：
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
Note:Better give this repoa star on Github.
注意：最好在 Github 上给这个 repo一个 star。
回答by Sword I
You can just link this js.
你可以链接这个js。
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
thanks.
谢谢。
