オブジェクトをドラッグする

jQuery JavaScript 
<html>
<head>
<link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(function() {
		$('#xydata').text('X:' + $('#dragobject').offset().left + ' / Y:' + $('#dragobject').offset().top);
		$('#dragobject').draggable({
			cursor: 'move',
			drag:function(){
				$('#xydata').text('X:' + $(this).offset().left + ' / Y:' + $(this).offset().top);
			}
		});
	});
//]]>
</script>
<style type="text/css">
#container{
	margin:20px;
}
#dragobject{
	background:#5b7e91;
	text-align:center;
	width:200px;
	height:200px;
}
#dragobject p {
	padding:20px 0;
	color:#fff;
}
</style>
</head>
<body>
<div id="container">
	<div id="xydata"></div>
	<div id="dragobject">
		<p>ここをドラッグ</p>
	</div>
</div>
</body>
</html>