[자바스크립트] 레이어 드래그 & 드롭

# 20080127 수정
 : 드래그 엘리먼트를 따로 지정할 수 있음
 : Direction 코드값 변경


사용법 : new Drag(AttributeName , DragElement , DragAreaNode , DragDirection , ScalePercentageAttributeName);
 - AttributeName : Element 클릭시 Element.getAttribute(AttributeName) 의 값이 "true" 일 때 Element를 드래그
 - DragElement : 해당 Element에 설정시 eval(Element.getAttribute(DragElement)) 를  드래그엘리먼트로 인식
 - DragAreaNode : 해당 Element에 설정시 eval(Element.getAttribute(DragAreaNode)) 하위노드에서만 드래그 가능
 - DragDirection(드래그가능방향) : Element.getAttribute(DragDirection)=[0 - Both , 1 - Horizontal , 2 - Vertical], 설정안할경우 Both
 - ScalePercentageAttributeName : Element.getAttribute(ScalePercentageAttributeName) 가 설정된 드래그 객체에 한해 DragAreaNode 로부터 Element 의 드래그범위를 설정한 비율로 리턴받을수있음(Object.ScaleX , Object.ScaleY)

 * 사용자 편의를 고려해서 최대한 각 Element의 이벤트핸들러나 기본속성에 접근하지 않는 방법을 선택했습니다. 그러다보니 거의 대부분을 사용자 확장 태그값으로 컨트롤 했는데 혹시 이 방법이 어떤 다른 이유에서 안좋다거나 하신분들은 의견 바랍니다.




<span id="text1" style="font-size:12pt;">Drag&Drop</span>

<br>

<embed id="music1" src="http://cfs9.blog.daum.net/upload_control/download.blog?fhandle=MEhUd09AZnM5LmJsb2cuZGF1bS5uZXQ6L0lNQUdFLzAvMTAud21h&filename=10.wma&filename=%ED%8B%B0%28%EC%9C%A4%EB%AF%B8%EB%9E%98%29-%EC%8B%9C%EA%B0%84%EC%9D%B4%ED%9D%90%EB%A5%B8%EB%92%A4.wma" autostart="true"></embed>

<br>

<div style="width:300px; height:300px; background:#72C31B;" draggable="true">Drag : free</div>
<div style="width:200px; height:200px; background:#FFA500; position:absolute;" id="div1" draggable="true" dragarea="document.body">dragarea : body
<input type="text" id="GridPositionX">
</div>
<div style="width:100px; height:100px; background:#FF0000;" draggable="true" dragarea="document.getElementById('div1')">dragarea : div1</div>

<img id="gridX" src="http://sstatic.naver.com/search/mypocket/v3/btn_atcmp_on_op2.gif" draggable="true" dragarea="document.getElementById('div1')" dragdirection="1" scalepercent="10000" onmousedown="return false" onmousemove="return false" title="HORIZONTAL">
<img id="gridY" src="http://sstatic.naver.com/search/mypocket/v3/btn_atcmp_on_op2.gif" draggable="true" dragarea="document.getElementById('div1')" dragdirection="2" scalepercent="500" onmousedown="return false" onmousemove="return false" title="VERTICAL">

<div id="dd" style="background:#000000; width:100px; height:100px;"><br>
<div style="background:#FFFFFF; cursor:move;" draggable="true" dragelement="document.getElementById('dd')">dragelement : parent</div>
</div>

<script language="javascript" src="Drag.js"></script>
<script language="javascript">
//기본설정
var myDrag = new Drag("draggable","dragelement","dragarea","dragdirection","scalepercent");
//기본설정

//응용설정
myDrag.addEvent(document,"onmousemove",function () {
    document.getElementById("GridPositionX").value = myDrag.ScaleX + " : " + Math.ceil(myDrag.ScaleX / 100) + "%";
    document.getElementById("music1").volume = myDrag.ScaleX - Number(document.getElementById("gridX").getAttribute("scalepercent"));
    document.getElementById("text1").style.fontSize = ((myDrag.ScaleY <= 12) ? 12 : myDrag.ScaleY) + "px";
});
//응용설정
</script>