[스크립트] 드래그 & 드롭 객체 Drag

invalid-file

사용법 : new Drag(AttributeName , DragAreaNode , DragDirection , ScalePercentageAttributeName);
 - AttributeName : Element 클릭시 Element.getAttribute(AttributeName) 의 값이 "true" 일 때 Element를 드래그
 - DragAreaNode : 해당 Element에 설정할 경우 eval(Element.getAttribute(DragAreaNode)) 하위노드에서만 드래그 가능
 - DragDirection(드래그가능방향) : Element.getAttribute(DragDirection)=[0 - Horizontal , 1 - Vertical , 2 - Both], 설정안할경우 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://mediafile.paran.com/MEDIA_10265022/BLOG/200611/1164756323_윤미래-시간이%20흐른%20뒤.mp3" 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">Drag : body
<input type="text" id="GridPositionX">
</div>
<div style="width:100px; height:100px; background:#FF0000;" draggable="true" dragarea="document.getElementById('div1')">Drag : 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="0" 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="1" scalepercent="500" onmousedown="return false" onmousemove="return false" title="VERTICAL">

<script language="javascript" src="Drag.js"></script>
<script language="javascript">
//기본설정
var myDrag = new Drag("draggable","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>


DTD 선언..
선언해도 되고 안해도 되는데
DragAreaNode 부분이나, 각 엘리먼트의 속성들은 각각 선언했을 때와 선언하지 않았을 때의 설정에 맞게 맞춰주셔야 합니다.
ex) "" : dragarea="document.body" -> "DTD" : dragarea="document.documentElement"