Javascript 에서의 Drag & Drop
Javascript / 2008. 12. 19. 10:47
순서
1. 이동할 객체를 선정하고 스타일을 준다
- 스타일은 position, top, left 세가지는 필수 사항이다
- position은 absolute, fixed, relative 세 가지 중 하나를 선택해야 한다.
2. 페이지 로드시에 이동할 객체에 onmousedown, onmousemove, onmouseup를 정의해 준다.
2. 마우스가 객체 위에서 다운(눌려진 상태) 일 경우 마우스의 위치를 구하고 이동할 경우 이동한 차이값을 구한다.
3. 이동한 차이값 만큼 객체의 top과 left 속성을 변경 시켜주면 끝.
1. 이동할 객체를 선정하고 스타일을 준다
- 스타일은 position, top, left 세가지는 필수 사항이다
- position은 absolute, fixed, relative 세 가지 중 하나를 선택해야 한다.
| <body> <form id="form1" runat="server"> <div id="hihi"> <img src="images/lee.jpg" alt="" id="img1" style=" position:absolute; top:0px; left:0px;" /> //스타일 </div> </form> </body> |
2. 페이지 로드시에 이동할 객체에 onmousedown, onmousemove, onmouseup를 정의해 준다.
2. 마우스가 객체 위에서 다운(눌려진 상태) 일 경우 마우스의 위치를 구하고 이동할 경우 이동한 차이값을 구한다.
3. 이동한 차이값 만큼 객체의 top과 left 속성을 변경 시켜주면 끝.
| <script type="text/javascript" language="javascript"> var img1; var isDown = false; var clientX1 = 0; var clientY1 = 0; var clientX2 = 0; var clientY2 = 0; var left; var top; window.onload = function() { img1 = document.getElementById("img1"); img1.onmousedown = mouseDown; img1.onmousemove = mouseMove; img1.onmouseup = mouseUp; } function mouseUp() { isDown = false; } function mouseDown() { isDown = true; clientX1 = event.clientX; clientY1 = event.clientY; clientX2 = clientX1; clientY2 = clientY1; //alert(clientX); } function mouseMove() { clientX1 = event.clientX; clientY1 = event.clientY; clientX2 = clientX1 - clientX2; clientY2 = clientY1 - clientY2; left = img1.style.left; top = img1.style.top; left = left.substr(0, left.length - 2); top = top.substr(0, top.length - 2); left = parseInt(left); top = parseInt(top); if (isDown) { img1.style.left = left + clientX2; img1.style.top = top + clientY2; clientX2 = clientX1; clientY2 = clientY1; return false; } } </script> |