[Javascript] Drag하면 Size가 바뀌는 기능만들기

윈도우에서 윈도우 창 끝에 두면 커서가 화살표로 바뀐다. 

화살표를 드래그하면 해당 윈도우 창을 늘이거나 줄일 수 있다 .

이런 기능을 브라우저에서 구현해보려고 한다. 

 

1. 사용할 윈도우 창 만들기 

메모장을 만드는 걸로 해보려 한다. 

윈도우 창의 우측하단 대각선 드래그 커서를 만드려고 한다. 

 

<div class="memoDiv">
    <div class="textDiv"></div>
    <button class="sizeBtn"></button>
</div>

HTML을 이렇게 만들고 

.memoDiv {
    width: 100px;
    height: 100px;
    background-color: gold;
    position: relative;
}
.sizeBtn {
    position : absolute;
    cursor:move;
    right:0;
    bottom:0;
    padding : 5px;
    background-color: transparent;
    border : none;
}

CSS는 이렇게 만들었다. 

 

이렇게 노란 메모장에 우측 하단에 마우스 커서가 바뀌는 퍼블리싱을 간단히 완성했다. 

이제 기능을 만들어 보자 .

드래그 기능은 

마우스다운, 마우스무브, 마우스업 이벤트를 이용해서 만들고자 한다. 

 

계획을 설명하자면

마우스 다운 시 현재 커서의 위치와 메모의 가로세로를 저장해준다.

마우스무브 시 변동되는 커서의 거리를 계산해서 변동되는 크기만큼 메모의 사이즈에 반영해준다.

마우스업 시 사이즈 변경을 끝낸다.

 

이런 과정으로 만들고자 한다. 

먼저 필요한 것을 변수 잡아준다. 

//사이즈변경에 사용할 것들
let sizeInfo = {
    x: 0,
    y: 0,
    width: 0,
    height: 0,
}
//사이즈가 변경될 메모
const memoObj = document.querySelector(".memoDiv");
//메모의 스타일
const styles = window.getComputedStyle(memoObj);

그 다음 계획대로 먼저 마우스다운 이벤트에 넣은 핸들러를 만들어보자

//사이즈변경에 사용할 것들
let sizeInfo = {
    x: 0,
    y: 0,
    width: 0,
    height: 0,
}
//사이즈가 변경될 메모
const memoObj = document.querySelector(".memoDiv");
//메모의 스타일
const styles = window.getComputedStyle(memoObj);

function mouseDownHandler(e){
    sizeInfo.x = e.clientX;
    sizeInfo.y = e.clientY;
    sizeInfo.width = parseInt(styles.width);
    sizeInfo.height = parseInt(styles.height);
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
}

메모의 우측하단을 마우스다운 하였을 때 

현재 커서의 위치 값을 저장하고, 메모의 사이즈를 저장한다. 

그리고 마우스무브와 마우스업의 이벤트를 만들어준다.

이때, 이벤트는 memoObj가 아니라 document가 되어야 마우스의 이동에 따라 포커스가 벗어나는 문제에 대해 지속시킬 수 있다.

 

이젠 마우스가 움직일 때 변경되는 거리를 기존 사이즈에 더해 스타일에 적용시키는 mouseMoverHandler와

드래그가 끝나고 드랍될때 이벤트를 remove하는 mouseUpHandler 를 마들어보자.

//사이즈변경에 사용할 것들
let sizeInfo = {
    x: 0,
    y: 0,
    width: 0,
    height: 0,
}
//사이즈가 변경될 메모
const memoObj = document.querySelector(".memoDiv");
//메모의 스타일
const styles = window.getComputedStyle(memoObj);

function mouseDownHandler(e){
    sizeInfo.x = e.clientX;
    sizeInfo.y = e.clientY;
    sizeInfo.width = parseInt(styles.width);
    sizeInfo.height = parseInt(styles.height);
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
}

function mouseMoveHandler(e){
    let dx = e.clientX - sizeInfo.x;
    let dy = e.clientY - sizeInfo.y;
    memoObj.style.width = `${sizeInfo.width + dx}px`;
    memoObj.style.height = `${sizeInfo.height + dy}px`;
}

function mouseUpHandler(e){
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
}
document.querySelector(".sizeBtn").addEventListener("mousedown",mouseDownHandler);

 

결과가 아주 이쁘다.

이렇게 만들었지만 사실 드래그 앤 드랍 플러그인이 좋은게 참 많아서

아는게 많을 수록 몸이 편한 법이고 

아는게 부족하니 이렇게 몸이 고생하며 만들어 봤다. 

그래도 재밋지 아니한가