본문 바로가기

프로그래밍관련/javascript

[MooTools] Drag & Drop : 포스트잇 [타이틀만 적용]

상단의 녹색 타이틀 부분에만 드래그 & 드랍 적용



사용자 삽입 이미지

<!-- 이하 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>