CODEWITHSUNDEEP
javascriptjqueryjquery-ui
daniatic
daniatic

Reputation: 532

Over event of droppable isn't working correctly, after draggable is dropped on greedy droppable and dragged again

The circumstances under which the over event isn't triggered are best explained by the following jsbin.

Do the following:

  1. Drag the draggable(yellow) over the droppables(red and blue), on the over event the droppables change their background color to green and on the out event they change their background color back.

  2. Drop the draggable on the inner droppable(blue).

  3. Drag the draggable over the outer droppable(red), it should change its background color to green, but it doesn't! The over event isn't fired but when you leave the outer droppable again its out event does fire. From there on it works again as expected.

I think this behaviour is a bug. Should I create a bug ticket?

EDIT:

The same behaviour is also achieved if I just set a hoverClass for the droppable options. See following jsbin. This has to be a bug, because the behaviour is inconsistent. After dropping the draggable in the inner droppable the behaviour is different.

Upvotes: 2

Views: 424

Answers (1)

daniatic
daniatic

Reputation: 532

I came up with a workaround:

By investigating the behaviour, there had to be some logic in the out event which didn't happen in the drop event. Every time the draggable enters a greedy droppable some logic is applied to prevent ancestor droppables from firing their drop event. In each out event this logic is reset and this reset is missing in the drop event. So I took the needed parts from the out event and implemented them into the drop event.

See the following jsbin

I can already apologize for not opening a bug ticket. If someone wants to do that please go ahead.

EDIT:

Ankit Saroch pointed out that there is already a bug ticket for this issue and also a simpler workaround exists. Check his comment below the question text.

Upvotes: 1

Related Questions