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… |
|---|---|
|
An accepted drag object begins dragging | |
|
An accepted drag object stops being dragged | |
|
An accepted drag object is dropped onto a droppable | |
|
An accepted drag object is moved out of the bounds (including the tolerance) of the droppable | |
|
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 droppable4.html...