drag and rotate an image inside a container

I am able to rotate image clone but it re-po开发者_如何学JAVAsition out side the div. is it possible to show that rotate image inside the div. here is the link for jsfiddle: http://jsfiddle.net/T6nn5/5/ but the rotate plugin is not included here, so, the image will not rotate.

I think the problem is that the page is set so the user drags and drops a clone of the image on to the grid. When you click on an image, the rotation plugin is called and replaces that image with a <span><canvas><canvas></span> (at least in Firefox). That is the reason the drag/drop stopped functioning.

The image is positioned using "absolute" positioning, and the canvas is positioned using "relative" positioning and that's why it ends up below the grid.

I haven't tested this, but I think the solution would be to wrap the image with a <span> that has drag/drop functionality applied to it. I don't know if the rotated canvas will once again be wrapped in a relatively positioned <span>. So there might still be positioning issues even after this suggested change.

On a side note, when clicking on the canvas, Firebug reports this error:

$(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)

Update: Here you go, updated demo and code:

HTML

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

Script

$(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);
    });
});

When you drag an image, your style is position: absolute; left: 745.5px; top: 788px; after you click on that image, the style is position: relative; left: -0.310859px; top: -43.3109px;. I don't know what your plugin does, but i think you should write your own jquery code. and this certainly is generating an error.