Draggable event callbacks

In addition to the options that we have already looked at, there are three more that can be used as callback functions to execute code after specific custom events occur.

These events are listed in the following table:

Event	Fired when…
drag	The mouse is moved while dragging
start	Dragging starts
stop	Dragging stops

While defining callback functions to make use of these events, the functions will always receive two arguments automatically: the original event object as the first argument, and a second object containing the following properties:

Property	Usage
helper	A jQuery object representing the helper element.
position	A nested object with properties: top and left, which is the position of the helper element relative to the original drag element.
offset	A nested object with properties: top and left, which is the position of the helper element relative to the page.

Using the callbacks and the two objects that are passed as arguments...