Img draggable

HTML

<link rel="stylesheet" href="http://www.fostcard.com/rotate/nicelook.css">
<link rel="stylesheet" href="http://www.fostcard.com/rotate/jquery.mobile.min.css">
<div id="img1" class="image">
    <img src="http://hosting.ber-art.nl/wp-content/uploads/twitter-logo.png" />
</div>
<div id="img2" class="image">
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRhTUFYdJZFP5-dY--L3jIvGKVxDC202JdHnj3OZGSdq7Lgq6k6" />
</div>
<div id="borders"></div>

CSS

.image {
        position: absolute;
        display: inline-block;
        border: 2px solid yellow;
    }
    .border {
        position: absolute;
        display: inline-block;
    }

JavaScript

var selectedImg;
var selectedDiv;

$(document).ready(function () {
    // putting images on screan
    $("#img1").css({
        "top": "200px",
        "left": "100px"
    });
    $("#img1").myrotate();
    $("#img2").css({
        "top": "100px",
        "left": "300px"
    });
    $("#img2").myrotate();

    // rotating image 2 
    rotateMe($("#img2"), 45);
    rotateMe(selectedDiv, 45);
});

function rotateMe(obj, rotation) {
    obj.css("transform", "rotateZ(-" + rotation + "deg)");
    obj.css("-moz-transform", "rotateZ(-" + rotation + "deg)");
    obj.css("-webkit-transform", "rotateZ(-" + rotation + "deg)");
    obj.css("-o-transform", "rotateZ(-" + rotation + "deg)");
}

(function ($) {
    $.fn.myrotate = function () {
        var img = this.find("img");
        $("#borders").append('<div id="div' + this.attr('id') + '"></div>');
        var divId = this.attr('id');
        var div = $("#div" + divId);
        var pos = $("#" + divId).position();
        selectedDiv = div;
        img.load(function () {
            div.css("border", "solid 1px black");
            div.css("left", pos.left);
            div.css("top", pos.top);
            div.css("width", img.width());
            div.css("height", img.height());
            div.addClass("border");

            div.draggable({
                // when you drag the border div, the image also has to move
                drag: function () {
                    id = $(this).attr("id").substring(3); // get div from image 
                    var pos = $(this).position();
                    $("#" + id).css({
                        "top": pos.top + "px",
                        "left": pos.left + "px"
                    });
                }
            });

        });
    };
})(jQuery);