JQuery droppable doesn't detect drop events after applying rotation

Question

I am applying droppable to rotated element.

Fiddle

The droppable events are getting triggered on the area prior to rotation and it does not get triggered on actual rotated element.

HTML

<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>

CSS

#draggable {
    width: 40px;
    height: 40px;
    background: #ccc;
}
#droppable {
    position: absolute;
    left: 250px;
    top: 80px;
    width: 225px;
    height: 35px;
    background: #999;
    color: #fff;
    padding: 10px;
    transform-origin:center;
    transform: rotate(45deg);
}

Javascript

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});

Thanks.