今回はドラッグ＆ドロップを実装したときのメモ。
3年くらい前に、先輩の書いたドロップ＆ドロップのコードは見たことあるけど、
もう完全に忘れているし、しかも当時は多分prototype.js使ってたと思うから。。
ということで、今回はjqueryを使ったドラッグ＆ドロップです。
使ったライブラリは「jquery-ui-1.8.11.custom.min.js」
今はもっと最新のもの出てると思うけど。。
↑のライブラリを使えば、個別に必要なライブラリが全て入っているようです。
使い方：
①ドラッグ（掴ませたい）させるテキストなり、画像なりに、
＜div class="drag">これを掴ませるよー＜/div>
を設定する。
②ドロップさせたいエリアに、
＜div class="drop">ここにドロップできるよー＜/div>
を設定する。
③で、javascriptに、
$(function(){
$('.drag').draggable({});
$('.drop').droppable({accept: '.drag'});
});
超シンプルにやるだけなら上記だけでできちゃいます。
超簡単ですな。
acceptの指定で、受け取るドラッグオブジェクトを指定しているみたいです。
ドロップできない場所にドロップした場合、元の場所にドラッグオブジェクトを戻すには、
draggableの中に、revert: 'invalid'を書いてあげればよし！
で、今回の肝の部分。
「ドロップしたら、ajax通信させてデータを更新したい」
順をおって説明しますと、
①
＜div class="drag">
これを掴ませるよー
＜input type="hidden" value="ID" class="hid_id" />
＜/div>
上記のようにPOSTパラメータをhiddenフィールドで定義する。
※hiddenにclassを設定させているのが肝
②javascriptのdroppableの中に、
$('.drop').droppable({
accept: '.drag',
drop: function(e, ui) {
// hiddenの値を取得
id = $(ui.draggable).children('.hid_id').val();
// ajax通信
$.ajax({url: http://xxx.com,
data: '[param名]=' + id
});
});
を書いてあげる。
ajax通信の書き方はすぐに見つけられるんだけど、
dragオブジェクト内のhidden値を取得するのに非常にはまった。。
IEの開発ツールで、「ui.draggable」の中身を調べてみると、
メソッド、変数の数が半端なかった。。。
但し、上記の$(ui.draggable).children('.hid_id').val();
の書き方がスマートな書き方だとは全く思っていなくて。。
もっと簡単に取得できると思うんだけどなぁ。。
今回はひとまず上記で出来たので良しとします。
突っ込みお待ちしています。
今回参考にしたサイト：
http://www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/
http://ec-cube.systemfriend.co.jp/technique/article0020/