Tag: 드래그&리사이즈 레이어

  • Draggable & Resizable 레이어 만들기 (3)

    3. Draggable & Resizable Layer 만들기 앞서 Draggable & Resizable 레이어 만들기 (1), Draggable & Resizable 레이어 만들기 (2) 에서 작성했던 코드를 기반으로,두 개의 코드를 합쳐보자. 우선 이벤트 리스너를 걸어준 두 개의 변수를 먼저 선언 한 후, 마우스 타겟 값을 대입 시켜 주기 위해 선언했던 변수를 선언한다. 생성 했던 드래그 함수와 이벤트 리스너를 추가 한…

    Read More

  • Draggable & Resizable 레이어 만들기 (2)

    2. Resizable Layer 만들기 클릭했을 때 레이어를 리사이즈 할 포인트를 변수로 먼저 선언 한 후,최초 X축의 위치, 최초 Y축의 위치, 리사이즈 전 최초 요소의 넓이, 리사이즈 전 최초 요소의 높이도 변수로 선언. Draggable 레이어 함수 생성했을 때와 동일하게,마우스를 누르는 순간 마우스의 위치 값을 변수에 대입해주고, resize할 레이어 요소의 넓이 값과 높이 값도 변수에 대입한다. 마우스를…

    Read More

  • Draggable & Resizable 레이어 만들기 (1)

    1. Draggable Layer 만들기 먼저 레이어를 drag를 할 레이어에 특정 아이디 값을 선언하여 필요한 변수를 먼저 선언하고,dragging 이벤트를 위한 변수와 x축과 y축의 좌표를 대입할 변수를 선언해준다.기본 변수 선언이 끝난 후, 마우스가 클릭 되었을 때, 마우스가 클릭 된 채 움직이고 있을 때, 그리고 마우스 클릭이 해제 되었을 때 일어날 이벤트 함수를 작성한다. 마우스를 누르는 순간 마우스의…

    Read More