michaelfranz.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <title>michaelfranz</title>
        <style type="text/css">
            *{ margin: 0;padding: 0; }

            html{
                font: normal 12px/normal Arial, Helvetica, sans-serif;
            }

            #frame{
                margin: 25px auto 0 auto;
                width: 945px;
                height: 579px;
                position: relative;
                border: 2px solid #333;
                background: url('http://i.imgur.com/rugw2.jpg') no-repeat;
            }

            #position{
                margin: 10px auto 0 auto;
                width: 945px;
            }

            #cord{
                padding: 2px;
                display: inline-block;
                border: 1px solid #666;
                background-color: #ccc;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var pos = $("#draggable").position();
                $("#cord").text("top: "+pos.top+", left: "+pos.left);

                $("#draggable").draggable({
                    containment: "#frame",
                    stop: function(){
                        pos = $(this).position();
                        $("#cord").text("top: "+pos.top+", left: "+pos.left);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="frame">
            <img id="draggable" src="http://i.imgur.com/PHFnI.jpg" alt="" />
        </div>
        <p id="position">
            <span><strong>Position:</strong></span>
            <span id="cord"></span>
        </p>
    </body>
</html>