Как не у меня есть вращение, которые следуют с помощью мыши правильно - Draggable

Question

http://jsfiddle.net/avPf6/1056/

код работает, но вращение путается и не правильно следовать за мышью:

ele.css('position', 'relative'); 
$('#handle').draggable({ 
    opacity: 0.01, 
    helper: 'clone', 
    drag: function(event, ui) { 
    console.log(ui); 
    var rotateCSS = 'rotate(' + ui.position.left + 'deg)'; 

    $(this).parent().css({ 
     '-moz-transform': rotateCSS, 
     '-webkit-transform': rotateCSS 
    }); 
    } 
}); 

Как я поворачиваю верный?

Answer 1

Я бы предложил использовать rotatable.js script для достижения этой цели. Он выполнит все вычисления, необходимые для правильного поворота элемента.

Updated Example

При этом, вы можете упростить JQuery вниз к следующему. Вот простой пример с использованием HTML/CSS вы предоставили:

$('.draggable').draggable().rotatable({ 
 
    handle: $('.draggable .handle') 
 
});

.parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
} 
 
.draggable { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
} 
 
.draggable .handle { 
 
    position: absolute; 
 
    bottom: 5px; 
 
    right: 5px; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script> 
 
<div class="parent"> 
 
    <div class="draggable"> 
 
    <div class="handle"></div> 
 
    </div> 
 
</div>