Question

so I have found that when I add both .draggable() and .droppable() to an element. (in this case, an image) that it won’t work. The .droppable().over: code never fires.

it is probably due to some recursion I use to move my images, but I can’t figure out why its breaking.

I have found out whats broken, and split out the problem domain into a .jsFiddle

I’m thinking I have some kind of event conflict going on with setting the .droppable() code. It can be ‘fixed’ by commenting out the ‘over’ event in the top .droppable()

well I need that ‘over’ event to do some work, hence, my problem.

in the code in the fiddle, you see 2 pawns on some chess squares. hovering one pawn over another should make an alert pop up, but only works when you comment out the “over” event in the top (spot) droppable:

http://jsfiddle.net/KevinGabbert/jBQby/60/

Success means that you pick up one pawn, and hover it over the other. an alert will pop up telling you the ID of the pawn being hovered OVER. (I already have a workaround, but I need to know why the ‘over’ event isn’t working, and how to structure my code to make it work)

I am not looking for a workaround. I am looking to for the answer that makes the ‘over’ code work

Answer 1

The problem is in your selectors. You should use

board.AddDragAndDrop(".piece", ".thing")

When you make the piece droppable it accepts class "ui-droppable" and when you make after that the spot droppable it actually match the pieces because they already have "ui-droppable" class. Your alert on the top is working because you are overriding "droppable" on the pieces. Hope this helps and sorry for my bad english 😉

Edit:
when you are calling

_newPiece.AddPieceEvents(dragSelector);

jQueryUI add class ui-droppable on all pieces and after that you are calling

_newSpot.AddSpotEvents(dropSelector);

the pieces already have class ui-droppable and you are initializing droppable on them again