본문 바로가기

Programming/문제점 해결

자바스크립트 Drag 기술

드래그 기능을 JavaScript 를 안쓰고 만들기는 힘들것 같습니다...


http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=58066&page=2


가보시면 Drag.js 파일이 있습니다.

다운받으시구, src 부분의 경로 잘 맞춰주시면 될것 같습니다.

드래그는 레이어, INPUT, TEXTAREA, SELECT, IMAGE 객체 모두 드래그가 가능합니다. 태그 안에 Drag 객체 설정시 설정했던 AttributeName 그대로 설정한후 값에 "true" 주면 됩니다. (IFRAME 은 잘 안되더군요 ㅠ;)



<script type="text/javascript" src="Drag.js"></script>
<script type="text/javascript">
new Drag("draggable");    //드래그가능하게할 AttributeName 을 설정해, 객체를 생성합니다.


function setOpacity(Obj,Opacity) {
    Obj.style.filter = "alpha(opacity=" + Opacity + ")";    //IE
    Obj.style.opacity = Opacity / 100;    //FF,Opera,Safari
}
</script>


<div style="width:100px; height:200px; background-color:#FA8406; cursor:move;" onmousedown="setOpacity(this,30)" onmouseup="setOpacity(this,100)" draggable="true"></div>
<div style="width:100px; height:200px; background-color:#FFFF00; cursor:pointer;" onmousedown="setOpacity(this,50)" onmouseup="setOpacity(this,100)" draggable="true"></div>
<div style="width:100px; height:200px; background-color:#DAE876; cursor:crosshair;" onmousedown="setOpacity(this,70)" onmouseup="setOpacity(this,100)" draggable="true"></div>