jQuery UI 滑块 Touch &移动设备上的拖放支持 [英] jQuery UI slider Touch & Drag/Drop support on Mobile devices

问题描述

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

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.

我们想要的功能:这里
我们使用的是什么:这里

在台式机上，您无法区分.在移动设备上很明显.

On a desktop you can't tell the difference. On a mobile device it is apparent.

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

Anyone know how to add this support to jquery UI?

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

推荐答案

jQuery ui 不支持触​​摸.您应该将它与 jQuery-ui touch Punch 一起使用.

jQuery ui doesn't have touch support. You should use it with jQuery-ui touch punch.

在 jQuery ui 后面添加脚本即可:

Just add the script after 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:

You can also use 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>

注意:最好给这个repo一个在 Github 上加星.

Note: Better give this repo a star on Github.

这篇关于jQuery UI 滑块 Touch &移动设备上的拖放支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！