<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

var $newPosX = 100,
    $newPosY = 100;

//create image node
var x = document.createElement("IMG");
x.src = "http://upload.wikimedia.org/wikipedia/commons/a/a4/Sol_de_Mayo_Bandera_Argentina.png";
x.width = 100;
x.height = 100;
x.id = "sun";
x.hspace = 100;
x.vspace = 100;
document.body.appendChild(x);

//coords
var text = document.createTextNode($newPosX + " " + $newPosY);
document.body.appendChild(text);

//make sun draggable and update coords
$("#sun").draggable({
    drag: function (event, ui) {
        $newPosX = $(this).offset().left;
        $newPosY = $(this).offset().top;
    }
});

//0 millisecond update for displayed coords
setInterval(check, 0);

function check() {
    //tries to constrain movement, doesn't work well
    /*
    if ($newPosX > 300) {
        $("#sun").offset({
            left: 200
        });
    }
    */
    text.nodeValue = ($newPosX + " " + $newPosY);
}