Draggableにイベントフック追加
DraggableのイベントフックonStart,onDrag,onEndの追加方法を調べました。ついでに、オブジェクトに任意の属性を追加する方法も。なんでも作れそうな気になってきた！？
今日のせいかぶつ
Draggableに独自のイベントフックを追加する
前回に続き、今回はDraggableのイベントフックを作り方を調べました。
方法はいたって簡単で、DraggablesにObserverを登録します。
独自のオブザーバを作るときのインターフェースは、次のようになっているようです（詳しくは、dragdrop.jsのDraggables.notify()を参照してください）。
<script type="text/javascript">
var YourObserver = Class.create();
YourObserver.prototype = {
initialize: function() {
},
onStart: function(eventName, draggable, event) {
},
onDrag: function(eventName, draggable, event) {
},
onEnd: function(eventName, draggable, event) {
}
}
Draggables.addObserver( new YourObserver() ); //オブザーバの登録
</script>
上のコードの「onStart」などを実装すればOKです。例えば、フックの入力値を表示してみると、次のようになります。
onStart: function(eventName, draggable, event) {
$('what').value=draggable.element.id; //何を？
$('how').value=eventName; //どうした？
}
Draggableに独自の属性をもたせる
以上で、ドラッグしたオブジェクトのIDを取得できることはわかりました。
でもショッピングカートなどの実装を考えた場合、オブジェクトの属性（価格とか商品名とか）がほしくなります。いくらAjaxだからといって、いちいちサーバサイドに問い合わせるのは面倒なので、Draggableオブジェクトに属性を追加した方が早い。
方法１：勝手にelementに属性を追加する。
<div class="product" id="watch1">
<img src="/pics/sample.jpg"/>
</div>
<script>
$('watch1').price = 1000;
$('watch1').title = "黒皮ベルト時計";
new Draggable('watch1');
</script>
としておけば、フックでは、次のように捕獲できます。
onStart: function(eventName, draggable, event) {
$('price_show').value=draggable.element.price;
$('title_show').value=draggable.element.title;
}
方法２：<form>をDraggableにする方法も、応用が利きそうです。
<form id="watch1">
<img src="/pics/sample.jpg"/>
<input type="hidden" name="price" value="1000"/>
<input type="hidden" name="title" value="黒皮ベルトの時計"/>
</form>
<script type="text/javascript">
new Draggable('watch1');
</script>
としておけば、フックでは、次のように捕獲できます。
・・・なんか、StrutsのFormBeanみたいっすね。
onStart: function(eventName, draggable, event) {
$('price_area').value=draggable.element.price.value;
$('title_area').value=draggable.element.title.value;
},
どっちの方法でも、冒頭の成果物のようになります（ここでは方法２を使いました）。
あとは「ドロップされる側」の検証が出来れば、いろいろ実用的なものが作れそうな気になってきました。
次は、Droppableを触ってみたいと思います。
