Draggable coordinates

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<form action="" method="post">
<div id="wrapper">
    <img id="image" src="http://emojipedia-us.s3.amazonaws.com/cache/8a/c4/8ac43535508caaeaa8c0fc59860f5970.png" alt="spongebob" />
</div>

<input type="hidden" name="source_x" id="source_x" />
<input type="hidden" name="source_y" id="source_y" />

<button type="button">Get coordinates!</button>

CSS

#wrapper { width:600px; height:200px; border:5px solid #333; cursor:move; margin:10px; }
#submit { margin:10px;}

JavaScript

$("#image").draggable({
    stop:function(event,ui) {
        var wrapper = $("#wrapper").offset();
        var borderLeft = parseInt($("#wrapper").css("border-left-width"),10);
        var borderTop = parseInt($("#wrapper").css("border-top-width"),10);
        var pos = ui.helper.offset();
        $("#source_x").val(pos.left - wrapper.left - borderLeft);
        $("#source_y").val(pos.top - wrapper.top - borderTop);
        alert($("#source_x").val() + "," + $("#source_y").val());
    }
});

$("button").click(function(){
		var x =$("#source_x").val(); 
		var y = $("#source_y").val();
    
    alert("x is: " + x + " y is: " + y);
});