jQueryのdraggableメソッドでのドラッグイベントの使い方

2013年11月10日2021年9月22日

こんにちは、ボーノです。

jQueryのdraggableメソッドはかなり便利で、重宝してます。
実装したらものすごい手間なので。

ドラッグイベントとしては3種類用意されているので、使い方を備忘録として残しておく。

draggable()

イベントオプションたち。

ドラッグが開始された直後に発生するイベント。例としては下記のような感じ。
用途はあまりないかもしれないけど、覚えておくと良いかも。

$("#hoge").draggable({
    start: function(){
        $(this).html("<p>今ドラッグ開始しました</p>");
    }
});

ドラッグされている間に発生するイベント。宙に浮いたような画像の切り替えや、文字の切り替え等に使えそう。

$("#hoge").draggable({
    drag: function(){
        $(this).html("<p>今ドラッグされています</p>");
    }
});

ドラッグが終了した直後に発生するイベント。

$("#hoge").draggable({
    stop: function(){
        $(this).html("<p>ドラッグ終わりました</p>");
    }
});

今回は、Google Maps APIの地図上に、他の要素からドラッグしてマーカーを追加するという小技を加えた。

近いうちにまた載せておこうかな。

＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／