iPhone / iPadでオブジェクトのドラッグ＆ドロップを可能にするjQueryプラグインを作った
iPhone / iPad向けにWebアプリを作っているとオブジェクトをドラッグ＆ドロップしたい場面によく出くわす。
方法は色々とあるのだが、毎回'var x = event.PageX; ....'とか書くのは面倒なのでjQueryプラグインにして使いまわすことにした。
初jQueryプラグインなので変な書き方をしているかもしれないが、iPad / iPad2 (iOS4 / iOS5)でそれぞれ動作確認できたので一旦リリースすることにする。
これはなに？
iPhoneおよびiPadのSafari上でdiv elementのドラッグ＆ドロップを出来るようにする。
また、オプションとして以下のような機能がある。
- ドロップ先のオブジェクト(Droppable Object)を作成できる。
- Droppable Objectにしかドロップできないオブジェクトを作成できる。
- 各オブジェクトにドラッグ時、ドロップ時、クリック時に特定の動作を実行させることができる。
このプラグインはprototype.jsベースのDrag Drop Library for Ipad and IphoneをjQueryプラグインに書き換えたものとなる。
使い方
ドラッグしたいオブジェクトを以下のように指定する。
$(document).ready(function(){
$(element).jDraggable();
});ドロップ専用のオブジェクトは以下のように指定する。
$(document).ready(function(){
$(element).jDroppable();
});クリック時のイベントを指定するには以下のようにする。
$(document).ready(function(){
$(element).jClick(fn);
});また、各関数にパラメータを指定することができる。
$(document).ready(function(){
$(element).jDraggable({any params});
});
パラメータ
以下のパラメータを指定することができる。
jDraggable
- handle
- (string|element) ここに指定したエレメントがrootエレメントを動かすハンドルのように振舞う。指定しない場合はrootエレメントがハンドルをとして振舞う。
- revert
- (boolean|string) trueを指定した場合、手を離すとエレメントは元の位置に戻る。ただし、Droppableオブジェクト上にはドロップすることができる。また、alwaysを指定した場合は常にもとの位置に戻る。デフォルトはfalse。
- scroll
- (boolean) trueを指定した場合、表示領域の端までエレメントを移動させると画面をスクロールさせることができる。デフォルトはfalse。
- onStart
- (function) ドラッグし始めたときに実行する関数を指定することができる。
- onEnd
- (function) ドラッグが完了したときに実行する関数を指定することができる。
jDroppable
- hoverClass
- (string) Draggableなエレメントをこのエレメント上に移動させたときのCSSを指定する。
- accept
- (array) このエレメント上にドロップできるDraggableなエレメントをclass名で指定する。特に指定しない場合は全てのDraggableなエレメントをドロップすることができる。
- onDrop
- (function) Draggableなエレメントをドロップしたときに実行する関数を指定することができる。
- onOver
- (function) Draggableなエレメントをこのエレメント上に移動したときに実行する関数を指定することができる。
- onOut
- (function) Draggableなエレメントをこのエレメント上から取り除いたときに実行する関数を指定することができる。
jClick
- onClick
- (function) このエレメントをクリックしたときに実行する関数を指定することができる。
注意書き
デモではonClick, onDropイベントでalertを実行しているが、この使い方は推奨しない。
touchendイベントが正常に取得されないために、次のタップ時に再び元オブジェクトのtouchstartイベントが発生するためだ。
Bitbucketからcloneするとindex.htmlでデモが実行されるようになっている。
デモ中で使用しているtouche.jsはPCブラウザ上でtouchイベントを発生させるためのライブラリであり、今回のプラグインとは関係ない。
