CODEWITHSUNDEEP
jqueryjquery-uidraggabledroppable
Michael Martin-Smucker
Michael Martin-Smucker

Reputation: 12725

Cloned jQuery draggable can't be dropped on itself

Using jQuery UI, I have a div foo which is both draggable and droppable, and a div bar which is only droppable. The dragging happens with the helper: 'clone' option turned on, so the original foo isn't actually moving. When I drop the cloned foo on top of the original foo, the drop: function doesn't get called.

This seems weird, because it works when I drop the cloned foo onto bar. It also works to drop other draggables onto foo. The only problem is that I can't drop foo onto itself.

I just said foo and bar and draggable and droppable so many times that even I'm confused, but this example should clear things up:

http://jsfiddle.net/5KATZ/

If you try to drag the first box onto the second or third, it works. But if instead of dropping it onto the second box, you start dragging it, then try to drop it onto itself, nothing happens. If this is how things are supposed to work, then what am I doing wrong? If this is a bug in jQuery UI, then can you think of any good workarounds?

Upvotes: 4

Views: 1573

Answers (1)

Ailef
Ailef

Reputation: 7906

EDIT

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

Nice question! This is the default behaviour in jQuery and I think it's right that it works this way... it is a strange thing to have the need to drop an item onto itself. Anyway try this jsFiddle which is a partial solution to your problem.

It works by detecting the position of the dragged div and see it if collapses with the first div position. I know this is not the most clear solution but it's the only one I was able to come up with. Also, this has a bug because the position gets calculated using the top left corner of the div so if you are dropping the first div onto the second by placing the mouse inside the second div BUT the top left corner of the div you're dragging is on top of the first one it will behave like you dropped it onto both divs. You should use mouse position instead of ui.position['top'] and ui.position['top'] and left to detect the position more precisely.

Upvotes: 1

Related Questions