モバイルデバイスでのjQuery UIスライダーのタッチとドラッグ/ドロップのサポート


102

私はすでにプロジェクトにjQuery UIスライダーをスタイルして実装しました。スライダーは反応しますが、タッチしたりドラッグしたりしても反応しません。代わりに、スライダーを動かしたい場所にタッチする必要があります。既にjQuery(非モバイル)UIを広く使用しているため、タッチとドラッグをサポートするjQueryモバイルUIへの切り替えを避けたいと思います。

必要な機能: ここ
使用しているもの:ここ

デスクトップでは違いがわかりません。モバイルデバイスでは明らかです。

誰でもこのサポートをjquery UIに追加する方法を知っていますか?

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

回答:


262

jQuery uiはタッチサポートを備えていません。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>

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の上の星を。


これは私の日を救います!
Dr3am3rz 2016年

どうもありがとうございました!これは本当に私の日を救います!!
Syamsoul Azrien 16年

はい、それはまたスライダーが正しい値を選択しないというバグを修正しました。
Ronen Festinger 2016年

1
rails5 androidおよびiosデバイスでチャームのように機能する
Stef Hej

great ..それはスムーズに動作します.. :) 1つの観察は、iOSデバイスでは、スライダーをスライドさせたときに、タッチしたときにスライドしないが、タッチを離したときにそのポイントでスライドするということです。なぜこれが起こるのか?これに対する解決策はありますか?
Rahul J. Rane

4

このjsをリンクするだけです。

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

ありがとう。


これにより、非常に高速に動作しました。ありがとう
tijnn
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.