jquery draggable - peroon's diary

ドラッグ可能なお菓子　のサンプルコード。

以下の構成↓

<head>
	<!--    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>-->
	<script src="http://www.google.com/jsapi"></script>
	<script>
	  google.load("jquery", "1.3.2");
	  google.load("jqueryui", "1.7.1");
	</script>
	<script type="text/javascript" src="mouse.js"></script>
</head>


<body onload=setPosition()>
	<form action="" method="" id="sampleform">
	<ul>
	<li>mouseX<input type="text" value="" name="mouseX"/></li>
	<li>mouseY<input type="text" value="" name="mouseY"/></li>
	</ul>
	</form>

	<div id='target'>ドラッグ可能</div>
	<script type="text/javascript">
		$('#target').draggable();
	</script>

	<div id='cake1'><img src="image\hotCake.png"></div>
	<script type="text/javascript">
		$('#cake1').draggable();
	</script>
	<div id='cake2'><img src="image\pudding.png"></div>
	<script type="text/javascript">
		$('#cake2').draggable();
	</script>
	<div id='cake3'><img src="image\strawberryCake.png"></div>
	<script type="text/javascript">
		$('#cake3').draggable();
	</script>
</body>

function setPosition(){
	target = document.getElementById('sampleform');
	window.document.onmousemove = function(e){
		target.mouseX.value = getMousePosition(e).x;
		target.mouseY.value = getMousePosition(e).y;
	}
}

function getMousePosition(e) {
	var obj = new Object();
	if(e){
		obj.x = e.pageX;
		obj.y = e.pageY;
	}
	else{
	obj.x = event.x + document.body.scrollLeft;
	obj.y = event.y + document.body.scrollTop;
	}
	return obj;
}