Mouse over events not fired when using jQuery ui.sortable

Question

I'm using jQuery UI Sortables to sort items between lists and drag / drop items from one list to the other.

The lists are collapsible with header DIVs that control the expand / collapse operations. I would like to have the lists expand automatically when hovering over their title DIVs with the mouse, but only when I'm currently sorting a list.

The problem is that when currently sorting (when I'm currently dragging a list item), mouseover / mouseout events do not seem to be firing for any object on the page.

Anyone has any idea why this happens / how to work around this?

The general layout:

<div class="category">
  <div class="title">title</div>
  <ul class="sortable">
    <li>item 1</li>
    <li>item 2</li>
     ....
  </ul>
</div>
<div class="category">
  ...
</div>

Thanks!

Answer 1

http://api.jqueryui.com/droppable/#event-over

$( ".title" ).droppable({
  over: function( event, ui ) {
    $(this).next().show(); # show ul.sortable
  }  
})

need jquery-ui droppable, of course

Answer 2

This is because there is a bug in the latest official JQuery 1.3 release. Get the latest trunk release to fix it.

This was related to another question I answered regarding start and update events not working either: jQuery Sortable callbacks not working?