Search code examples
jqueryhtmlcssjquery-uijquery-ui-droppable

Droppable hoverClass option is not working in Internet Explorer

I can't seem to get it to work. It works fine in Firefox, but in IE nothing happens when the droppable has an item held over it.

I tried using the hoverClass option, and also tried just manually changing the class in "over" and "out" events. Both methods work in Firefox, but not IE. Is there a work-around for IE?

Below is my code:

over: function(ev, ui) {
  $(this).addClass( 'droppable-hover' );
},

out: function(ev, ui) {
  $(this).removeClass( 'droppable-hover' );
}
Solution

  • The droppable-hover class uses the outline style property, which is not supported in IE (except IE5 on the Macintosh). At least so says W3Schools. You could approximate it on IE using:

    <!--[if IE]>
<style>
.   droppable-hover
   {
       border: double 1px black;
   }
</style>
<![endif]-->