『jQuery UI Touch Punch』を使ってスマートフォンでも jQuery UI を使えるようにする方法

phi phi on jQuery, jQuery UI

はじめに

今更な感じもしますが, わりと最近でも jQuery UI を使うことがあります.

まぁサクッとドラッグや並び替えを実装しようと思うと jQuery UI が一番楽だったりするんですよね.

ただ, 普通に jQuery, jQuery UI を読み込むだけだとスマートフォンのようなタッチデバイスでちゃんと動いてくれません.

jQuery UI Touch Punch

そこで使えるのが『jQuery UI Touch Punch』です!! なんとこれ, 読み込むだけで jQuery UI をタッチデバイス対応してくれます.

中でやってることはマウスイベントをタッチイベントに切り替えてるだけなんですけどね.

デモ

デモです. PCでもスマートフォンでもボックスをドラッグで動かせます.

QR も載せておきますね.

demo qr

使い方

ただ jQuery UI Touch Punch のスクリプトを読み込むだけです.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js'></script>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css' />  
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

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

あとはいつも通りに jQuery UI のコードを書けばスマートフォンでもちゃんと動くのが確認できます.

$(function() {
  $('#draggable').draggable();
});

おわりに

なんだかんだでリッチな表現をしようとすると今でも jQuery や jQuery UI って重宝するんですよね.

次回は, jQuery UI の sortable を使ってアイテムを並び替える tips でも書こうと思います.