jquery - 拖动并旋转容器内的图像

Question

我可以旋转图像克隆，但它会重新定位在 div 之外。是否可以在 div 内显示旋转图像。这是 jsfiddle 的链接:http://jsfiddle.net/T6nn5/5/ 但这里不包含旋转插件，因此图像不会旋转。

Answer 1

我认为问题在于页面设置为用户将图像的克隆拖放到网格上。当您单击图像时，将调用旋转插件并将该图像替换为 <span><canvas><canvas></span> (至少在 Firefox 中)。这就是拖/放停止运行的原因。

图像使用“绝对”定位进行定位，而 Canvas 使用“相对”定位进行定位，这就是它最终位于网格下方的原因。

我还没有测试过这个，但我认为解决方案是用 <span> 包裹图像。具有拖/放功能。不知道旋转后的 Canvas 是否会再次被包裹在一个相对定位的<span>中。因此，即使在建议的更改之后，仍然可能存在定位问题。

顺便说一句，当单击 Canvas 时，Firebug 报告此错误:

$(this).rotate({angle: test, containment: "working-area"}).parent is not a function [Break On This Error] Failed to load source for: http://usha...ng_Conveyors/build.php?num1=50&num2=50 build....num2=50 (line 624)

---

更新:给你，updated demo和代码:

HTML

<li>
    <span class="draggable">
        <img class="rotatable" src="http://www.bootheyankees.com/images/GoogleIcon.png"/>
    </span>
</li>

脚本

$(document).ready(function() {
    $('#dhtmlgoodies_xpPane .draggable').draggable({
        scope: "draggable",
        helper: "clone"
    });
    $('#working-area .rotatable').live('click', function(event) {
        test = test + 90;
        $(this).rotate({
            angle: test,
            containment: "working-area"
        });
    });
    $("#working-area").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: "#dhtmlgoodies_xpPane li .draggable",
        drop: function(event, ui) {
            $(this).append($(ui.helper).clone().draggable());

        },
        scope: "draggable"
    }).mousemove(function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('#status2').html("X = " + x + ', ' + "Y = " + y);
    });
});