Question

I have an accept function defined on the red box in the fiddle.

Expected

Accept runs once when draggable enters it.

Actual

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

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

I am not asking how to avoid this; I can write my own revert functionality, but the main reason it seems I have to is because this doesn’t seem to work right.

To see what I’m saying, drag the yellow box to the left of the screen. You’ll see the accept counter increments every drag pixel. What is going on? Why does accept run so many times when nothing is dragged onto it?

Answer 1

Accept can be either a selector (typically a class) describing the items that can be dragged into the droppable, or a function that will return true if the object passed to it can be dropped on the target.

Inconveniently, it seems the accept function is run on every drag event (start, stop, enter, leave), as well as on drags along the edge of the page. If your accept function is going to get quite large, you might want to put it in the drop/stop method, and revert if it is an invalid drop.

Alternately, you could start off the accept function by determining whether the item has been dropped or is being dropped, and only do the heavy lifting in that case (otherwise return true, see note below).

Side note: if accept returns false on drag start, it doesn’t run for any of the other events (except dragging along the edge of the page).