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

最新記事

img001

卒業生インタビュー

2019.08.28

【卒業生の声:田中さん】美容師からプログラマーへ転身!PCスキルゼロからチーム開発でリーダーを務めるまでに成長したその秘密に迫る

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社アニシス プログラマカレッジ卒業生の田中さんにお話しをお伺いしました! 目次 IT業界へ憧れ、PCスキルゼロからプログラマーを目指すー 独 […]

続きを見る

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.