
<!-- 이하 test.html 소스 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="kr" lang="kr">
<head>
<style>
body{
background: black;
}
#containment {
height: 210px;
width: 330px;
background: blue;
position: relative;
}
#dragger {
height: 20px;
width: 330px;
background: green;
position: relative;
top: 0;
left: 0;
}
div.dropper {
margin-left: 10px;
margin-top: 10px;
float: left;
height: 40px;
width: 30px;
background: #ff3300;
}
</style>
</head>
<script type="text/javascript" src="js/mootools1.1.js"></script>
<script type="text/javascript">
function bodyOnload(){
var dd = {
onStart: function() {
this.element.setOpacity(.5);
$("containment").setOpacity(.5);
},
onComplete: function() {
this.element.setOpacity(1);
$("containment").setOpacity(1);
},
onDrag: function() {
document.getElementById("containment").style.left = document.getElementById("dragger").style.left;
document.getElementById("containment").style.top = document.getElementById("dragger").style.top;
document.getElementById("x").value = document.getElementById("dragger").style.left;
document.getElementById("y").value = document.getElementById("dragger").style.top;
}
}
drag = $('dragger').addClass('drag').makeDraggable(dd);
}
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
</script>
<body onload="bodyOnload();">
<div id="dragger">Drag</div>
<div id="containment">
<div id="dropper">content</div>
</div>
<input name="x" id="x" value="0">
<input name="y" id="y" value="0">
</body>
</html>