Cloned jQuery draggable cannot be cast aside

Question

Using jQuery UI, I have a foo div that is both draggable and droppable, and a div bar that is only droppable. Drag and drop occurs when the helper: 'clone' option is turned on, so the original foo does not actually move. When I throw a cloned foo on top of the original foo , drop: function not called.

This seems odd because it works when I throw a cloned foo to bar . It also works to drop other draggables on foo . The only problem is that I cannot throw foo to myself.

I just said foo and bar and dragged and dropped so many times that even I am confused, but this example should clarify the situation:

http://jsfiddle.net/5KATZ/

If you try to drag the first square onto the second or third, it will work. But if, instead of dropping it onto the second block, you start dragging it and then trying to drop it onto yourself, nothing happens. If so, how it should work, then what am I doing wrong? If this is a bug in the jQuery user interface, can you think of any good workarounds?

Answer 1

EDIT

This works better: http://jsfiddle.net/kW369/ , I also left the old one.

Good question! This is the default behavior in jQuery, and I think it’s correct that it works this way ... it is strange that you need to drop the element onto yourself. Anyway, try this jsFiddle , which is a partial solution to your problem.

It works by detecting the position of the draggable div and examining it if it collapses with the first position of the div. I know that this is not the clearest solution, but this is the only thing I could come up with. In addition, this one has an error, because the position is calculated using the upper left corner of the div, so if you drop the first div on the second by placing the mouse in the second div, BUT the upper left corner of the div that you drag is on top of the first, it will behave the same way you dropped it on both divs. You should use the mouse position instead of ui.position ['top'] and ui.position ['top'] and to the left to more accurately determine the position.