jquery ui draggable not working properly when changing the angle of parent element with css rotate

jquery ui draggable not working properly when changing the angle of parent element with css rotate

When I change the angle of the parent element which is specified for containment of a draggable element draggable is not working properly. The draggable element is going outside the containment element. Its working properly If I didn't rotate the element. jsFiddle is here

Here is my code
 

  1. <div class="container"> <div class="draggable"></div> </div>
  2. $('.draggable').draggable({ containment: ".container" });
  3. .container{ width : 250px; height : 250px; margin: 70px 0 0 70px; border : solid 1px #333; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); } .draggable { position: relative; cursor: pointer; width : 100px; height : 100px; border:solid 1px #f00;  }