はじめに

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

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

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

jQuery UI Touch Punch

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

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

• jQuery UI Touch Punch - Touch Event Support for jQuery UI
• furf/jquery-ui-touch-punch: A duck punch for adding touch events to jQuery UI

デモ

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

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 でも書こうと思います.