monaca/onsenUIでjQueryUIのsortableを使って並び替えができるスマホアプリ

作りたいアプリはこんなの。

• 1枚目の画面：リストに項目を入力する画面。
• 2枚目の画面：1枚目で入力した項目を並べ替えることができる画面。
• 3枚目の画面：2枚目で並べ替えた順番を元に結果を表示する画面。

「順番を並び替える」という動きは、jQueryUIのsortableを使えばできるらしい！
Sortable | jQuery UI

さっそくサンプルを作って実験

サンプルとして1枚目の画面にsortableのオブジェクトを表示させてみる。
⇨できた！

monacaクラウドのシミュレータでsortableが動かせるかチェック
⇨できた！ぬるぬる動いてすごい！

手持ちのAndroidスマートフォン上のデバッガで動かしてみる
⇨動かない…ピクリとも。

解決！

いろいろ、調べているとこんなページを発見
【jQuery】iPad・iPnoneにも対応！ドラッグ＆ドロップで移動できるリストを作る方法 ｜ KLUTCHE

スマートフォンではtouchという操作になるためjQueryUIのsortableがそのままでは使えないとのこと。
で、「jQuery UI Touch Punch」を使えばできるらしい！
jQuery UI Touch Punch - Touch Event Support for jQuery UI

できたー！

自分のスマートフォンで自作のアプリが動いている！
1画面だけの無意味なアプリだけどすごくうれしい！
楽しいから頑張れそう！