How to use drag events in jQuery’s draggable method

2013年11月10日2023年5月28日 1分

Hello, this is Bono.

The draggable method of jQuery is quite useful and handy.
It would be a huge hassle to implement.

There are three types of drag events available, so I will leave this as a reminder of how to use them.

　　　コンテンツ

draggable()

Event options.

An event that occurs immediately after a drag is initiated. An example is shown below.
It may not have many uses, but it's good to keep in mind.

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

An event that occurs while being dragged. This could be used for switching images that seem to float in mid-air, switching text, etc.

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

An event that occurs immediately after a drag ends.

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

This time, we added a small trick to the Google Maps API map: adding markers by dragging them from other elements.

I'll put it up again soon.

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