Why does the jQuery UI droppable `accept` function run when nothing happens?

Question

I have an acceptance function defined in the red box in the script.

Expected

Acceptance is performed once when dragged.

Actual

Accept seems to run once when it is being dragged, when it leaves, and many, many times if I drag the yellow box to the left of the HTML screen.

In action: http://jsfiddle.net/bjJv8/

I do not ask how to avoid this; I can write my own return function, but the main reason I think it is because it does not seem to work correctly.

To see what I'm saying, drag the yellow square to the left of the screen. You will see that the accept counter increments every drag and drop pixel. What's happening? Why is accept executed so many times when nothing pulls on it?

Answer 1

Accept can be either a selector (usually a class) that describes elements that can be dragged into droppable, or a function that returns true if the object passed to it can be reset to the target.

Inconveniently, it seems that the accept function is triggered on every drag and drop event (start, stop, enter, leave), as well as when dragging along the edge of the page. If your receive function is quite large, you can put it in the drop / stop method and return if it is an invalid drop.

Alternatively, you can start with the accept function, determining whether the element has been dropped or discarded, and only a heavy lift in this case (otherwise return true, see note below).

Note: if accept returns false when dragging, it does not fire for any of the other events (except for dragging along the edge of the page).