Я искал много времени, но не могу найти лучший способ решить мою проблему,
сделать div перетаскиваемым, повернуть и изменить размер каждого дескриптора, как эти 2 пример 1 2, теперь его можно перетаскивать, но вращать..
Относительно Prasanth KC, Chango, Yi Jiang.. ответ, этот код может быть не правильно,
1. он должен иметь точку поворота вокруг начала координат.
2. нужно учитывать радиус.
Но я не знаю, как использовать sin или cos здесь, чтобы заставить поворот считать радиус?
Любое предложение будет оценено.
http://jsfiddle.net/tBgLh/8/
var dragging = false, target_wp;
$('.handle').mousedown(function(e) {
var o_x = e.pageX, o_y = e.pageY; // origin point
e.preventDefault();
e.stopPropagation();
dragging = true;
target_wp=$(e.target).closest('.draggable_wp');
$(document).mousemove(function(e) {
if (dragging) {
var s_x = e.pageX, s_y = e.pageY; // start rotate point
if(s_x !== o_x && s_y !== o_y){ //start rotate
var s_rad = Math.atan2(s_y, s_x);
var degree = (s_rad * (360 / (2 * Math.PI)));
target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-moz-transform-origin', '50% 50%');
target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-webkit-transform-origin', '50% 50%');
target_wp.css('-o-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-o-transform-origin', '50% 50%');
target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)');
target_wp.css('-ms-transform-origin', '50% 50%');
}
}
})
$(document).mouseup(function() {
dragging = false
})
})// end mousemove
HTML
<div class="draggable_wp">
<div class="el"></div>
<div class="handle"></div>
</div>