我已经搜索了很长时间,但找不到更好的方法来解决我的问题,
使 div 可拖动,通过每个手柄旋转和调整大小,就像这些 2 示例1 2,现在它可以拖动,但是旋转..
关于Prasanth KC , Chango , Yijiang .. 的回答,这些代码可能不正确,
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>