カテゴリー
iPhone/iPad 技術的なお話

iPhone/iPad用のhtml要素をドラッグ&ドロップできるページを作る

技術的な内容の備忘録をつけていこうと思います。
本来はテーマごとにブログをたちあげたほうが良いのでしょうが、とりあえずここで。

iPhone/iPadのSafariでhtmlの要素をドラッグ&ドロップ可能にする方法です。
PC用のWebページの場合はjQuery UIを使えばさくっと簡単に実装できるのですが、iPhone/iPadではマウスではなくタッチ操作になるのでそのままでは動きません。
jQuery UIをiPhone/iPadで動かすにはjQuery UI Touch Punchを利用する必要があります。

jQuery UI Touch Punchはタッチイベントからマウスのイベントへ橋渡しをしてくれるもの。これを使えばマウスでドラッグ&ドロップするのと同様にタッチ操作でドラッグ&ドロップが可能になります。
jQuery UI Touch Punchは読み込ませるだけで使用可能です。jQuery UI Touch Punch用のコードを書く必要はありません。

ではさっそく試してみましょう。
jQuery UIとjQuery UI Touch Punchをダウンロードし、ページに読み込ませます。 jQuery UIはダウンロード時に使わない機能を除外して軽量化することができます。ドラッグ&ドロップだけ実現でいいのであればUI CoreとInteractionsのみで他は除外してかまいません。また、jQuery UIにはjQuery本体が必要になりますので忘れずに読み込ませます。

<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>

あとはjQueryのセレクタでdraggable()してあげれば、指定した要素がドラッグ可能になります。

$(".hoge").draggable();

jQueryを利用したことがあれば簡単だと思います。

サンプル

jQuery UI
jQuery UI Touch Punch