catch 'hover' event while dragging

Question

I'm using jQuery-ui draggable and droppable in my page. basically I'm implementing an accordion, where you can drag an item from one section and drop in another. I don't use jquery-ui accordion - I simply want to reveal the relevant section and hide the others when the time is right (when you hover over a section header while dragging). The problem I'm facing is that the hover event doesn't seem to work while dragging. the second thing I've tried was to set the section headers as droppable and implement the 'over' callback function. the problem is that there seem to be a problem with dynamic droppable location - when the section header moves (for example, the section above it was revealed and pushed the section header below it down), the droppable location remains in the same location any ideas ?

Answer 1

You may want to change your ui so that the parts that enable you to change sections doesn't themselves move.

So, you could have some navigation links or tabs, as these will be static. A user drags an item over the tab, the new tab now opens, and they can then drop it in the correct spot.

Answer 2

here's how i solved it:

1. set {refreshPostions: true} in the draggable options (this hurts performance a bit but i've seen no other way)
2. set in the droppable:

over: function() {$("#accordion").accordion('activate', $("#accordion .header").index(this))