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

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

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

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

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

　　　コンテンツ

draggable()

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

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

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

$("#hoge").draggable({

start: function(){

$(this).html("今ドラッグ開始しました");

}

});

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

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

$("#hoge").draggable({

drag: function(){

$(this).html("今ドラッグされています");

}

});

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

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

$("#hoge").draggable({

stop: function(){

$(this).html("ドラッグ終わりました");

}

});

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

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

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