javascript - 回転したdivでドラッグ可能なjquery ui

Question

コンテナー div に子 div があり、コンテナー div は 30 度回転し、子 div はドラッグ可能な要素です。しかし、ドラッグ動作は正しくありません。

html:

<div id="container" class="r30">
  <div id="child"></div>
</div>

CSS:

  #container {
      width: 300px;
      height: 300px;
      background-color: yellow;
  }

  #child {
      width: 200px;
      height: 200px;
      background-color: black;
  }

  .r30 {
      -webkit-transform: rotate(30deg);
      -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
  }

js:

$("#child").draggable();

または jsfiddle: http://jsfiddle.net/wuminzhe/GEruH/