Rotating rectangular objects in JQuery
<p>I have a question regarding JQuery and dragging and rotating images. I have done quite a bit of searching but have not found the answer to my question.
Basically, my problem is that when I rotate a rectangular object I need the object to remain under the mouse cursor, but this happens: </p>

<p><a href="http://www.upload.ee/image/2132688/Untitled-1.jpg" rel="nofollow">Link to image </a></p>

<p>The red dot on the right screen shows where I place the mouse cursor. When I rotate the ship  the result is on the left screen. The ship is no longer under the mouse cursor. I am trying to re-position the ship by giving it the mouse coordinates, but I am doing something wrong.</p>

<pre><code>$(document).bind('mousemove', function(event){
        mouseXPos = event.pageX;
        mouseYPos = event.pageY;
    });

$(".ship").draggable();

$(".ship").mousedown(function(e) {

        $(this).focus();

        last_i_ship_os = $(this).offset();

        $($(this)).bind('keydown', function(event) {    
            if(event.keyCode == '38' || event.keyCode == '40'){     
                if($(this).hasClass("rotate")){
                    $(this).removeClass("rotate");
                }else{
                    $(this).addClass("rotate");
                                    //this is where I try to reposition the ship
                                    //under my mouse cursor, but it doesn't work                                             
                    $(this).css({ 'position': absolute, 'left' : mouseXPos, 'top' : mouseYPos});
                }
            }
        });
</code></pre>

<p>Thanks in advance</p>
