iPhone/iPadでjQuery UIのsortable,resizeableなどに対応する

2013年5月7日

Pocket

こにゃにゃちわ~。山本です。

jQuery UIを用いて、チョコっとしたUIをウェブサイトに組み込むことは、比較的よくあります。
とりわけ私がよく使うのは

  • draggable
  • resizable
  • sortable

あたりなのですが、これらのUIはその性質上ドラッグアンドドロップを使用します。

ただし、iPhone/iPadなどのiOSデバイスでは御存知の通り、touch操作になっているので、jQueryそのままではうまく動きません。

そこで活躍するのが、jQuery UI Touch Punchです。1つのjsファイルで完結しているので、基本的にjQuery UIを読み込んでいるscriptタグの後に、こいつを読み込むだけで、スマートフォンなどでのドラッグアンドドロップ操作が可能になることが確認できました。

ただし、このままだと一つ問題があります。それは「sortableメソッドなどでcancel属性を指定していても効かない。」ということです。Sortable対象の中に、input type="text"などがあると、jQuery UIだと、cancelを指定しておかないと、テキストフィールドに入力ができなくなります。これと同じ現象が、iPhone上で発生するようになります。

対策は次のようになります。

jquery.ui.touch-punch.js内の、simulateMouseEvent関数内に、

event.preventDefault();

という行があります。この行を直下のvar touch = event.originalEvent....という行の下に持ってきます。その上で、

event.preventDefault();

という行を

if ($(touch.target).is('input')) {
  event.stopPropagation();
} else {
  event.preventDefault();
}

こう書き換えます。isの中のセレクタが、cancel指定したものと同じになるようにしておけば、OKです。対象の場合にイベントの伝播をキャンセルしますので、無事テキストフィールドに文字を入力することができるようになりました。

でわでわ。

Leave a Comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)