ITコラム

jquery ui touch punch

jQuery

2018.06.29

jQuery【 jQuery UI 】Touch Punch を使用してスマホ対応

slider や sortable など、jQuery UI で用意された機能を利用すると、ドラッグや並び替え等 複雑な動作を短いコードで実装することができます。

ですが、スマートフォンのようなタッチデバイス上では期待した動きが望めない事もあります。

そこで今回は、タッチデバイス上でも マウスやキーボードの操作と同様に動かせる実装方法を紹介します。

目次

1.jQuery UI Touch Punch
2.タッチイベント対応の slider
3.タッチイベント対応の sortable

1.jQuery UI Touch Punch

 
jQuery UIをタッチデバイスに対応させるためのjQuery UI Touch Punchというライブラリがあります。

今回は、このjQuery UI Touch Punch を使用して タッチイベントに対応するシステムを作成します。
 

jquery.ui.touch-punch.js ファイルをダウンロードして使用する方法

jQuery UI Touch Punch をダウンロードして使用する場合は、ダウンロードサイトから、jquery.ui.touch-punch.min.js ファイルをダウンロードして 任意の場所に保存し、次のように読み込んで使用します。

<script type="text/javascript" src="保存場所/jquery.ui.touch-punch.min.js"></script>

 

jQuery UI Touch Punch の CDN を使用する方法

jQuery UI Touch Punch の CDN を利用する場合は、次のように記述して jquery.ui.touch-punch.min.js ファイルを直接読み込んで使用します。

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

こちらから最新バージョンをご確認下さい。

▲目次へ戻る

 

2.タッチイベント対応の slider

 
jQuery UI と共に jQuery UI Touch Punch を読み込んで、タッチイベントで動作可能なスライダーを作成します。
スライダーをタッチイベントで動かしてみて下さい。
また、タッチイベントに対応していないスライダーと比較してみて下さい。


 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">

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

<script type="text/javascript">
<!--
$(function() {
  $("#wkSlider").slider();
});
//-->
</script>

<div style="background-color:#CCC; padding : 30px 50px;">
  <div id="wkSlider"></div>
</div>

jQuery UI Touch Punch を読み込むだけで、タッチイベント対応のシステムとなります。

jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

▲目次へ戻る

 

3.タッチイベント対応の sortable

 
今度は、タッチイベントで ドラッグ&ドロップによる並べ替えが可能となるように実装します。
次の 5 項目を、タッチイベントによるドラッグ&ドロップで入れ替えてみて下さい。
また、タッチイベントに対応していないものと比較してみて下さい。

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">

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

<script type="text/javascript">
<!--
$(function() {
  $("#sortableArea").sortable();
});
//-->
</script>

<div style="background-color:#CCC; padding : 20px 20px 10px;">
  <div id="sortableArea">
    <div class="ui-state-default">1</div>
    <div class="ui-state-default">2</div>
    <div class="ui-state-default">3</div>
    <div class="ui-state-default">4</div>
    <div class="ui-state-default">5</div>
  </div>
</div>

▲目次へ戻る

SHARE

最新記事

zoom_mv_03

卒業生インタビュー

2021.03.03

【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います

受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.