3. Draggable & Resizable Layer 만들기
앞서 Draggable & Resizable 레이어 만들기 (1), Draggable & Resizable 레이어 만들기 (2) 에서 작성했던 코드를 기반으로,
두 개의 코드를 합쳐보자.
const flexContainer = document.getElementById('layer');
const resizePointer = document.querySelector('.resize'); // 리사이즈 이벤트 실행 포인트 변수 선언
let dragging = false,
xPos, // X축 좌표 변수 선언
yPos, // Y축 좌표 변수 선언
initWidth, // 레이어 최초 넓이 변수 선언
initHeight; // 레이어 최초 높이 변수 선언
우선 이벤트 리스너를 걸어준 두 개의 변수를 먼저 선언 한 후,
마우스 타겟 값을 대입 시켜 주기 위해 선언했던 변수를 선언한다.
function dragStart(e) {
e.preventDefault(); // 브라우저 기본 이벤트를 방지
xPos = e.clientX; // 현재 마우스 X축 위치값을 변수에 대입
yPos = e.clientY; // 현재 마우스 Y축 위치값을 변수에 대입
dragging = true; // dragging 설정을 활성화
};
function dragMove(e) {
if(dragging) {
const currentPosx = xPos - e.clientX, // 현재 X축 값 변수 선언
currentPosY = yPos - e.clientY; // 현재 Y축 값 변수 선언
xPos = e.clientX; // 움직이는 마우스 X축 값을 변수에 대입
yPos = e.clientY; // 움직이는 마우스 Y축 값을 변수에 대입
flexContainer.style.left = `${flexContainer.offsetLeft - currentPosx}px`; // drag layer에 마우스가 위치한 x축 값을 선언
flexContainer.style.top = `${flexContainer.offsetTop - currentPosY}px`; // drag layer에 마우스가 위치한 y축 값을 선언
}
};
function dragEnd(e) {
dragging = false; // 마우스 클릭이 해제 되었을 경우 선언
};
flexContainer.addEventListener("mousedown", dragStart);
document.addEventListener("mousemove", dragMove);
document.addEventListener("mouseup", dragEnd);
function initDrag(e) {
xPos = e.clientX; // 현재 마우스 X축 위치 값을 변수에 대입
yPos = e.clientY; // 현재 마우스 Y축 위치 값을 변수에 대입
initWidth = parseInt(window.getComputedStyle(flexContainer).width, 10);
initHeight = parseInt(window.getComputedStyle(flexContainer).height, 10);
document.addEventListener("mousemove", resizing);
document.addEventListener("mouseup", stopResize);
};
function resizing(e) {
e.preventDefault();
flexContainer.style.width = `${(initWidth + e.clientX - xPos)}px`;
flexContainer.style.height = `${(initHeight + e.clientY - yPos)}px`;
};
function stopResize(e) {
document.removeEventListener("mousemove", resizing);
document.removeEventListener("mouseup", stopResize);
};
resizePointer.addEventListener("mousedown", initDrag);
생성 했던 드래그 함수와 이벤트 리스너를 추가 한 후, 리사이즈 함수와 이벤트 리스너를 추가한다.
위의 코드를 실행하면 아래와 같다. 여기서 resizePointer 부분을 클릭을 했음에도 드래그 이벤트만 발생하고 리사이즈 이벤트는 실행되지 않는다.
resizePointer에 mousedown으로 생성된 이벤트가 버블링 되어 “.resize” 보다 상위에 존재하는 “#layer”의 이벤트를
최종 실행시켜 나타나는 현상이다.
resizePointer에서 발생하는 특정 타겟 이벤트에 e.stopPropagation을 추가하여 버블링 현상을 막으면 리사이즈 이벤트가 문제 없이 실행된다.
function initDrag(e) {
xPos = e.clientX; // 현재 마우스 X축 위치값을 변수에 대입
yPos = e.clientY; // 현재 마우스 Y축 위치값을 변수에 대입
initWidth = parseInt(window.getComputedStyle(flexContainer).width, 10);
initHeight = parseInt(window.getComputedStyle(flexContainer).height, 10);
document.addEventListener("mousemove", resizing);
document.addEventListener("mouseup", stopResize);
e.stopPropagation(); // 버블링 현상 방지
};
최종 코드 반영 후 결과
Leave a Reply