1. Draggable Layer 만들기
const flexContainer = document.getElementById('layer');
let dragging = false, // 마우스의 이벤트 false
xPos, // X축 좌표 변수 선언
yPos; // Y축 좌표 변수 선언
먼저 레이어를 drag를 할 레이어에 특정 아이디 값을 선언하여 필요한 변수를 먼저 선언하고,
dragging 이벤트를 위한 변수와 x축과 y축의 좌표를 대입할 변수를 선언해준다.
기본 변수 선언이 끝난 후, 마우스가 클릭 되었을 때, 마우스가 클릭 된 채 움직이고 있을 때, 그리고 마우스 클릭이 해제 되었을 때 일어날 이벤트 함수를 작성한다.
// 마우스 클릭 이벤트가 시작되었을 때
function dragStart(e) {
e.preventDefault(); // 브라우저 기본 이벤트를 방지
xPos = e.clientX; // 현재 마우스 X축 위치값을 변수에 대입
yPos = e.clientY; // 현재 마우스 Y축 위치값을 변수에 대입
dragging = true; // dragging 설정을 활성화
};
마우스를 누르는 순간 마우스의 위치 값을 가져와 위쪽에서 선언해준 변수에 그 값을 대입해준다. 마우스 이벤트 설정을 true값으로 변경한다.
// 마우스가 움직이고 있을 때
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축 값을 선언
}
};
마우스가 클릭 한 채로 마우스를 이동 되고 있을 때 그 마우스 위치 값을 계산 해,
현재 위치 값을 가진 변수를 하나 선언 해 그 값을 대입해준다.
currentPosx는 xPos(dragStart에서 대입 되어진 x축 값) – e.clientX(움직임 x축 값) 이 대입 되며,
currentPosx에 값이 대입 되고 난 이 후 xPos에는 제일 마지막 움직임의 x축의 값을 최종 대입해 업데이트 된다.
Drag layer에 css style 값을 선언하여 해당 요소의 최종 위치 값(flexContainer.offsetLeft(Drag layer 요소의 왼쪽 x축 값) – currentPosx(이동 된 현재 x축 값))을 변경해 해당 요소의 위치가 변경되도록 한다.
function dragEnd(e) {
dragging = false; // 마우스 클릭이 해제 되었을 경우 선언
};
마우스 클릭이 해제 되었을 때의 함수를 생성하고 마우스 이벤트 값을 false로 변경해 이벤트를 해제한다.
flexContainer.addEventListener("mousedown", dragStart);
document.addEventListener("mousemove", dragMove);
document.addEventListener("mouseup", dragEnd);
최종적으로 드래그 할 레이어와 윈도우에 마우스 클릭, 마우스 이동, 마우스 클릭 해제에 따라 생성한 함수를 callback 한다.
최종 코드와 결과.
Leave a Reply