我已经寻找了很长时间,但找不到更好的方法来解决我的问题,
使 div
可以通过每个手柄进行拖动、旋转和调整大小,就像这两个例子一样:1 2,现在它可以被拖动,但旋转有问题..
关于Prasanth K C, Chango, Yi Jiang 等人的回答,这些代码可能不正确,
1. 它应该围绕原点具有一个旋转点。
2. 需要考虑半径。
但我不知道如何在这里使用正弦或余弦来使旋转考虑半径?
任何建议将不胜感激。
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>