2. Resizable Layer 만들기
const flexContainer = document.getElementById('layer');
const resizePointer = document.querySelector('.resize'); // 리사이즈 이벤트 실행 포인트 변수 선언
let initX,
initY,
initWidth,
initHeight;
클릭했을 때 레이어를 리사이즈 할 포인트를 변수로 먼저 선언 한 후,
최초 X축의 위치, 최초 Y축의 위치, 리사이즈 전 최초 요소의 넓이, 리사이즈 전 최초 요소의 높이도 변수로 선언.
function initDrag(e) {
initX = e.clientX;
initY = e.clientY;
initWidth = parseInt(window.getComputedStyle(flexContainer).width, 10);
initHeight = parseInt(window.getComputedStyle(flexContainer).height, 10);
};
Draggable 레이어 함수 생성했을 때와 동일하게,
마우스를 누르는 순간 마우스의 위치 값을 변수에 대입해주고, resize할 레이어 요소의 넓이 값과 높이 값도 변수에 대입한다.
function resizing(e) {
flexContainer.style.width = `${(initWidth + e.clientX - initX)}px`;
flexContainer.style.height = `${(initHeight + e.clientY - initY)}px`;
};
마우스를 움직여 사이즈를 변경해줄 때의 함수(resizing)를 생성한다.
최종 레이어 넓이 값(최초 레이어 넓이 값 + 현재 마우스가 위치하고 있는 X축 값 – 최초 X축 값)을 css 스타일로 값을 변경해준다.
function stopResize(e) {
document.removeEventListener("mousemove", resizing);
document.removeEventListener("mouseup", stopResize);
};
resizePointer.addEventListener("mousedown", initDrag);
마우스 클릭 해제가 되었을 경우의 함수(stopResize)를 추가한다.
마우스가 움직일 때는 resizing함수를 마우스 클릭이 해제 되었을 때는 stopResizing함수를 callback 해준다.
리사이즈 함수를 진행할 포인트 요소에 initDrag함수를 클릭 이벤트로 콜백한다.
function initDrag(e) {
initX = e.clientX;
initY = e.clientY;
initWidth = parseInt(window.getComputedStyle(flexContainer).width, 10);
initHeight = parseInt(window.getComputedStyle(flexContainer).height, 10);
document.addEventListener('mousemove', resizing); // resizing 함수를 콜백
document.addEventListener('mouseup', stopResize); // stopResize 함수를 콜백
}
stopResizing 함수에서 이벤트 리스너를 삭제 해주었지만, 상위의 마우스 클릭 initDrag 함수에는 삭제할 이벤트 리스너가 추가되어 있지 않으므로
마우스 클릭과 동시에 진행되어야 할 두 함수 resizing과 stopResize 를 콜백해준다.
최종 코드와 결과.
Leave a Reply