ユーザーが画像を回転できるようにしようとしていますが、何があってもうまくいかないようです。画像のドラッグ/ドロップ/サイズ変更が完全に機能していますが、回転は正しく機能したくありません。
ご覧になり、これを修正する方法を教えてください。ありがとう。
コード：
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true
};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0]);
$("#dropHere .img").addClass("imgSize-"+counts[0]);
$("#dropHere .img").addClass("mainTarget-"+counts[0]);
$("#dropHere #rotate").attr("id", "target-"+counts[0]);
$("#dropHere .imgSize").attr("id", "mainTarget-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
});
//Allow image to be rotated.
var dragging = false;
$(function() {
var target = $('[id^=target-]');
var mainTarget = $('[id^=mainTarget-]');
var offset = mainTarget.offset();
target.mousedown(function() {
dragging = true
})
$(document).mouseup(function() {
dragging = false
})
$(document).mousemove(function(e) {
if (dragging) {
var center_x = (offset.left) + (mainTarget.width()/2);
var center_y = (offset.top) + (mainTarget.height()/2);
var mouse_x = e.pageX; var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 120;
mainTarget.css('-moz-transform', 'rotate(' + degree + 'deg)');
mainTarget.css('-moz-transform-origin', '50% 50%');
mainTarget.css('-webkit-transform', 'rotate(' + degree + 'deg)');
mainTarget.css('-webkit-transform-origin', '50% 50%');
mainTarget.css('-o-transform', 'rotate(' + degree + 'deg)');
mainTarget.css('-o-transform-origin', '50% 50%');
mainTarget.css('-ms-transform', 'rotate(' + degree + 'deg)');
mainTarget.css('-ms-transform-origin', '50% 50%');
}
})
});
HTML:
<div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg">
<span id="rotate">Rotate</span></img>
</div>
CSS:
#dropHere {
width:400px;
height: 400px;
border: dotted 1px black;
}