jQuery UI滑块Touch&移动设备上的拖放支持

问题描述

我已经将jQuery UI滑块样式化并实现到一个项目中.虽然它是可移动的并且可以正确缩放，但不允许点击和拖动.取而代之的是，您必须触摸滑块要移到的位置. jQuery mobile UI支持此功能，但是我有时间投入到已有的内容中.

I have already styled and implemented jQuery UI slider into a project. While it is mobile and scales properly, it does not allow tap and drag. Instead you have to touch where you want the slider to go. jQuery mobile UI supports this, but I have time invested into what is already there.

我们想要的功能:此处
我们正在使用的是:此处

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.

有人知道如何将这种支持添加到jquery用户界面吗?

Anyone know how to add this support to jquery UI?

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

谢谢，赛斯

推荐答案

jQuery ui不支持触摸.您应该将它与 jQuery-ui触摸打孔器一起使用.

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>

注意:最好提供此存储库在Github上担任明星.

Note: Better give this repo a star on Github.

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