Understanding the droppable callback options

The options that we've looked at so far configure various operational features of the droppable. In addition to these, there are almost as many callback options so that we can define functions that react to different things occurring to the droppable and its accepted drag objects. These options are listed in the following table:

Callback option	Invoked when…
activate	An accepted drag object begins dragging.
deactivate	An accepted drag object stops being dragged.
drop	An accepted drag object is dropped onto a droppable.
out	An accepted drag object is moved out of the bounds (including the tolerance) of the droppable.
over	An accepted drag object is moved within the bounds (including the tolerance) of the droppable.

Let's put together a basic example that makes use of these callback options. We'll add a status bar to our droppable that reports the status of different interactions between the drag object and the droppable. In...