블로그 이미지
프로그램을 가장 훌륭하게 작성하는 방법은 상태가 변경되는 오브젝트들과 수학적인 값을 나타내는 오브젝트들의 조합으로 표현하는 것이다. -Kent Beck 초초초보

카테고리

Programming (184)
ASP.NET (9)
Silverlight (2)
Javascript (20)
C# (8)
java (25)
SQL (14)
Oracle (3)
MyBatis (3)
기타 (52)
개발방법론 (1)
trouble shooting (2)
Linux (5)
스칼라 (5)
html (2)
grails & gradle (3)
Spring (2)
rabbitmq (1)
맥 (3)
spark (0)
docker (3)
Total
Today
Yesterday

달력

« » 2024.5
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

공지사항

최근에 올라온 글

Javascript 에서의 Drag & Drop

Javascript / 2008. 12. 19. 10:47
순서
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>




저작자표시
Posted by 초초초보
, |

Silverlight 에서의 Drag & Drop 사용하기

Silverlight / 2008. 12. 18. 20:25

자바스크립트에서의 Drag & Drop과 비슷하다.

Canvas 에서 많이 하는 것 같지만 나는 Grid 에서 하였음.

-----------xaml 코드에서 ------------
먼저 Silverlight Page 를 만들면 UserControl  태그의 Width가 400 Height가 300으로 설정이 되는 걸 볼 수 있다.
이대로 두고 최상위 Grid인 LayoutRoot의 Background를 Black으로 바꾸고
(어느 영역을 차지하고 있는지 한눈에 알아 볼 수 있게)
자식으로 새로운 Grid 를 하나 둔다. 그리고 x:Name 속성을 gridDrag 로 설정한다.
 그리고 Background를 White로 설정한다.  Width와 Height 모두 50으로 설정
그리고  VerticalAlignment="Top" HorizontalAlignment="Left" 를 설정하여 좌측 위쪽 구석으로 자식 Grid 를 몰아둔다.

그러면 대략 이런 그림이 나온다.



검은색 바탕의 최상위 Grid인 LayoutRoot와 그 자식으로 둔 하얀색 바탕의 Grid 가 보이 게 된다.


  -----------cs 코드에서---------------
클래스 생성자에서 아까 이름을 정해 주었던 하얀색 바탕의 gridDrag에 이벤트를 정의해 준다.
정의할 이벤트는
MouseLeftButtonDown
MouseMove
MouseLeftButtonUp
이렇게 세가지 이다.
그리고 멤버필드를 정의해 준다.
마우스가 다운 상태인지(클릭된 상태인지)를 나타내주는
bool isDown = false;

마우스를 클릭(다운상태) 했을 경우의 위치값을 가져오는
double mouseTop1 = 0.0;
double mouseLeft1 = 0.0;

이전의 위치와 현재의 위치의 차이를 가져오는
double mouseTop2 = 0.0;
double mouseLeft2 = 0.0;

마우스의 위치를 알게 새주는
Point p;

마지막으로 margin을 설정해주는
Thickness margin = new Thickness();

중간 정리하면 클래스 생성자에 3가지의 이벤트를 등록하고 멤버로 7개를 정의해 준다.


MouseLeftButtonUp 이벤트에는 마우스가 눌려진 상태가 아니라는 걸 알려주기 위하여
 isDown = false; 한줄 코딩을 해준다.

MouseLeftButtonDown 이벤트에는 마우스가 눌려졌다는 걸 알려주기 위하여
isDown = true; 코딩을 해주고
마우스의 위치값을 가져와야 한다.

MouseLeftButtonDown  이벤트의 두 번째 매개변수로 넘어온 e 변수를 이용하여 위치값을 얻을 수 있다.
p = e.GetPosition(this);
위치값을 얻었으면 마우스의 위치를 대입해주고 
mouseLeft1 = p.X;
mouseTop1 = p.Y;

이동한 값을 알아야 하므로
mouseLeft2 = mouseLeft1;
mouseTop2 = mouseTop1;
이런식으로 대입해준다. (마우스를 누르게 되면 이동한 값이 없으므로 현재값과 차이값이 같아야 한다.)

마지막 이벤트인
MouseMove 이벤트에서도 마찬가지로
이동한 값을 알아야 하므로 마우스의 위치값을 구해온다.

 p = e.GetPosition(this); // 마우스의 위치값을 구한다.

마우스의 좌표를 저장한다.
mouseLeft1 = p.X;
mouseTop1 = p.Y;

원래 위치와 이동한 위치의 차이를 알아내기 위하여
mouseLeft2 = (mouseLeft1 - mouseLeft2);
mouseTop2 = (mouseTop1 - mouseTop2);
차이값을 구한다.

위치값을 구했다면 마우스를 이동할 것인지 말 것인지를 정해야 한다.
조건문은 당연히 마우스가 눌러진 상태일때만 눌러져야하므로
isDown가 true 여야 한다.
하지만 조건이 하나라면 마우스가 빨리 움질일 경우 마우스가 객체를 놓치는 경우가 있다.
CaptureMouse() 메서드를 이용하여 마우스가 해당 객체를 잡고 있는지? 가 true 일 경우도 같이 조건을 주어야 한다.
조건은
if (isDown && gridDrag.CaptureMouse()) 이런식으로 주면 된다.

if 문 안의 블록에서 실제로 객체를 이동 시켜야 한다.
Thickness 구조체의 변수인 margin의 값을 일단 설정을 해준다.
margin의 값의 설정은 해당 객체의 위치 + 이동한 값으로 해주면 된다.

margin.Left = gridDrag.Margin.Left + mouseLeft2;
margin.Top = gridDrag.Margin.Top + mouseTop2;

그리고 gridDrag 객체의 Margin 값에 대입해준다.
 gridDrag.Margin = margin;

이렇게 하면 객체는 움직일 것이다. 하지만 대각선으로 아주 심하게 움직인다.;
드래그 이벤트는 움직이는 순간에 계속 일어나므로 계속해서 값을 대입해 주어야 한다.

현재위치와 이동한 위치의 차이점을 구하기 위해서는
다시 현재 위치와 이동한 위치의 차이의 변수들을 동일하게 만들어 주어야 한다.

mouseLeft2 = mouseLeft1;
mouseTop2 = mouseTop1;

이렇게 해서 아주 간단한 Drag & Drop의 구현이 완성 되었다.;

끝.

           -------------------------------  소스코드  -----------------------------

SilverTraning.zip




저작자표시
Posted by 초초초보
, |

PerfMon.exe 사용하기.(성능)

기타 / 2008. 12. 18. 11:01

원문 : http://technet.microsoft.com/ko-kr/library/cc784965.aspx


저작자표시
Posted by 초초초보
, |

최근에 달린 댓글

글 보관함

티스토리툴바