移动设备上的 jQuery UI 滑块触摸和拖放支持答案

【问题标题】：jQuery UI slider Touch & Drag/Drop support on Mobile devices移动设备上的 jQuery UI 滑块触摸和拖放支持
【发布时间】：2012-11-28 07:43:09
【问题描述】：

我已经在一个项目中设计并实现了 jQuery UI 滑块。虽然它是响应式的，但滑块不会响应被触摸和拖动。相反，您必须触摸您希望滑块移动的位置。我想避免切换到支持触摸和拖动的 jQuery 移动 UI，因为我们已经广泛使用 jQuery（非移动）UI。

我们想要的功能： Here
我们使用的是：Here

在桌面上您无法区分。在移动设备上很明显。

有人知道如何将这种支持添加到 jquery UI 中吗？

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

【问题讨论】：

jQuery UI sliders on touch devices的可能重复

标签： jquery jquery-ui touch jquery-ui-slider

【解决方案1】：

jQuery ui 不支持触控。您应该将它与jQuery-ui touch punch 一起使用。

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

你也可以使用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>

注意：最好在 Github 上给 this repo 一个 star。

【讨论】：

这节省了我的时间！
非常感谢！这真的节省了我的一天！
是的，它还修复了滑块未选择正确值的错误。
在 rails5 android 和 ios 设备上的工作就像一个魅力
太棒了.. 它运行顺畅.. :) 一个观察结果是，在 iOS 设备中，当我们滑动滑块时，当我们触摸它时它不会滑动，但是当我们从它释放触摸时它会滑动观点。知道为什么会这样吗？你有什么解决办法吗？

【解决方案2】：

你可以只链接这个js。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

谢谢。

【讨论】：

【解决方案3】：

如果您在 Wordpress 中，您可以在 functions.php 中使用此代码：

add_action( 'wp_head', function () {

    // jquery.ui.touch-punch
    wp_enqueue_script( 'jquery.ui.touch-punch', '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js', [], '0.2.3',false );

}, 999 );

【讨论】：