jQuery-ui draggable изменяется ось после вращения

Question

Я создал this fiddle, чтобы продемонстрировать свою проблему. Пожалуйста, нажмите rotate button Попробуйте переместить желтые прямоугольники (вы можете сделать это, прежде чем нажимать кнопку).

Проблема очевидна - после вращения перетащить & отбросить работу в странном виде.

Я искал эту проблему, но не нашел решения.

Код:

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<button id="rotator">rotate</button> 

<div id="map"> 
    <div class="ball">whee</div> 
    <div class="ball">heyyy</div> 
    <div class="ball">hiii</div> 
</div> 

JS

$(function() { 
    $(".ball").draggable(); 

    $("#rotator").click(function(){  
     $("#map").css({ 
      WebkitTransform: 'rotate(120deg)', 
      '-moz-transform': 'rotate(120deg)' 
     }); 
    }); 
}); 

CSS

.ball {width: 100px; height: 100px; background: yellow; border: 1px solid red;} 
#map {margin-top: 50px; border: black 1px solid; min-width: 250px; min-height: 250px;} 

Answer 1

Так проблема в том, что оси X и Y, кажется, ориентированы на родитель перетаскиваемых, который кажется странным ...

Возможный обходной путь будет использовать appendTo и helper варианты, как так:

Working Example

$(function() { 
    $(".ball").draggable({ 
     appendTo: 'body', 
     helper: 'clone' 
    }); 

    $("#rotator").click(function() { 
     $("#map").css({ 
      WebkitTransform: 'rotate(120deg)', 
       '-moz-transform': 'rotate(120deg)' 
     }); 

     $(".ball").draggable({ 
      appendTo: 'body', 
      helper: 'clone', 
      drag: function() { 
       $(".ui-draggable-dragging").css({ 
        WebkitTransform: 'rotate(120deg)', 
         '-moz-transform': 'rotate(120deg)' 
       }); 
      } 
     }); 

    }); 
});