jquery旋转、拖动并调整大小

Question

我正在做一个项目，我想在其中拖动、旋转和调整图像大小。这是我的第一个jquery项目，到目前为止一切正常。通过stackoverflow，我找到了处理旋转的插件jqueryrotate。

问题是，我现在有一个可以拖动和旋转的图像，但当我尝试调整旋转图像的大小时，我得到了一些有趣的结果。旋转后的大小调整似乎关闭。

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.1.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>    
<img id="resizableImage0" class="resize" width="100px" height="100px" alt="tile0" src="http://www.elaxtro.com/images/demo.png">
<img id="resizableImage1" class="resize" width="100px" height="100px" alt="tile1" src="http://www.specialized.com/OA_MEDIA/2009/bikes/9397-20_demo8_2_ano_blue_d.jpg">

jQuery

window.zindex = 30;
$(document).ready(function() {
    $(".resize").resizable();
    $(".resize").parent().draggable({
        stack: "div"
    });
    $(".resize").rotate({
        bind: {
            dblclick: function() {
                // get current
                var currentAngle = $(this).get(0).Wilq32.PhotoEffect._angle;
                var newAngle = currentAngle + 90;
                $(this).rotate(newAngle);
            }
        }
    });
});

小提琴应该把事情弄清楚。Fiddle

双击可将图像旋转90度：）

有人能帮我做这件事吗。

提前谢谢。

编辑：修复了小提琴示例中的调整大小器请注意，如果旋转一次，使图像旋转90度，则问题最明显。之后尝试调整大小。

当图像旋转为0度或180度时不会出现问题

Answer 1

与使用draggable()一样，必须在父级div上使用rotate()。

$(".resize").resizable({handles: 'ne, se, sw, nw'});
$(".resize").parent().draggable({
    stack: "div"
});
$(".resize").rotate({
    bind: {
        dblclick: function() {
            $(this).data('angle', $(this).data('angle')+90);
            var w = $(this).css('width');
            $(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w});
        }
    }
});

http://jsfiddle.net/U64se/163/（哇163…）