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

こにゃにゃちわ～。

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

draggable
resizable
sortable

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

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

そこで活躍するのが、ｊQuery 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です。対象の場合にイベントの伝播をキャンセルしますので、無事テキストフィールドに文字を入力することができるようになりました。

関連記事

コメント