Question

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

Answer 1

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

使用“绝对”定位定位图像，并使用“相对”定位定位画布，这就是它最终位于网格下方的原因。

我没有对此进行过测试，但我认为解决方案是使用已应用了拖放功能的<span>来包装图像。我不知道旋转的画布是否会再次被包裹在相对定位的<span>中。因此，即使在这个建议的改变之后，仍可能存在定位问题。

另外，在点击画布时，Firebug会报告此错误：

$（this）.rotate（{angle：test，遏制：“工作区”}）。父母不是一个功能[Break On This 错误]无法加载源： http://usha...ng_Conveyors/build.php?num1=50&num2=50 build .... num2 = 50（第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);
    });
});

Answer 2

拖动图片后，单击该图片后样式为position: absolute; left: 745.5px; top: 788px;，样式为position: relative; left: -0.310859px; top: -43.3109px;。我不知道你的插件做了什么，但我认为你应该编写自己的jquery代码。这肯定会产生错误。

拖动并旋转容器内的图像

2 个答案: