jQuery UI Droppableに疑似的にdropする

jquery ui droppable とかを JSTAPd でテストするいい方法ないかなー。。。

http://twitter.com/Yappo/status/5416937057

これが気になったので、やってみた。

前提としてjQuery UIの各pluginはplugin用のオブジェクトを持っていて、
jQueryオブジェクトでのpluginメソッドの呼び出しは、
内部的にはplugin用のオブジェクトのメソッド呼び出しだというのがある。

例えば、$(someElement).dialog('open');というpluginメソッドの呼び出しは、
$(someElement).data('dialog')で取得出来るplugin用のオブジェクトのopenメソッドを呼ぶというのと等価、
つまり、$(someElement).dialog('open'); ＝ $(someElement).data('dialog').open();と考えていい。
これらのメソッドは各pluginのソースの$.widget("ui."+widgetName, {});で定義しているもので、
_initメソッドはコンストラクタのようなもの、その他の_で始まるメソッドはprivateメソッドと考えると分かりやすい。
ただ、privateメソッドのようなものと言っても正当な経路で呼び出しができないというだけである。
somePluginというjQueryUI pluginがあったとして_privateMethodというprivateメソッドがあったとすると、
$(someElement).somePlugin('_privateMethod');という形で呼び出す事はできない。
しかし、$(someElement).data('somePlugin')._privateMethod();でなら呼び出せる。

で、疑似dropはどうかというとほとんどの場合は以下の簡単なコードで実現出来る。

function pseudoDrop(draggableElement , droppableElement) {
    var draggable = $(draggableElement).data('draggable');
    var droppable = $(droppableElement).data('droppable');
    droppable._drop({},draggable);
}

droppable plugin用オブジェクトの_drop privateメソッドに、
eventオブジェクトの代わりの空オブジェクトと、
drag&dropするdraggable要素のdraggable plugin用オブジェクトを渡してやるだけ。
ね、簡単でしょう?

jQuery UI公式サイトのデモもほとんどこれでできる。
pseudoDrop('#draggable','#droppable');とかやってやればいい。
Visual feedbackやRevert draggable positionについては疑似dropの場合、
実際のdrag&dropと違って過程がなくdropしたという結果にいきなりたどり着いてしまうので、
意味がなくなってしまうがdrop自体は普通にできる。

問題はPrevent propagationのデモで、
これの場合はこのやり方ではどうにもならないので次回に続く。

とりあえず、ネストしたdroppableにdrop、近接したdroppable複数またぐようにdrop、
とかやらないなら今回のやり方で問題はないはずですよ、と。