마우스로 창을 움직여보자!

 

폴더창이나 인터넷 창 등.....

보통 상단부 부분을 마우스로 꾹!누르고 움직이면 창을 이동시킬수 있잖아요?

 

이렇게요 ↓↓↓

창 움직이는 gif

 

오늘은 이 기능을 만들어 보도록 하겠습니다.!

^^

 

 

먼저 움직일 객체를 만들기위한 작업을 합니다.

HTML

<div class="wrap">
    <div class="header">
        이곳을 드래그 하세요.
    </div>
</div>

 

 

대충 모양을 꾸며줄게요.

CSS

.wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.header{
  padding: 5px;
  text-align: center;
  font-size: 14px;
  color: #333;
  background: #ddd;
  cursor: default;
}

.header.active{
	cursor: move;
}

 

 

그다음 기능을 추가해줍니다.

JS

const wrap = document.querySelector(".wrap");
const header = document.querySelector(".header");
let lastX = 0;
let lastY = 0; 
let startX = 0; 
let startY = 0; 

// 1.
header.addEventListener('mousedown', function(e){
  e.preventDefault(); 
  startX = e.clientX; 
  startY = e.clientY; 
	
  // 2.  
  header.classList.add('active');
  
  // 3.
  document.addEventListener('mouseup', onRemoveEvent); 
  
  // 4.
  document.addEventListener('mousemove', onMove); 
});

function onRemoveEvent() { 
  header.classList.remove('active');
  document.removeEventListener('mouseup', onRemoveEvent); 
  document.removeEventListener('mousemove', onMove); 
} 

function onMove(e) { 
  e.preventDefault(); 
  lastX = startX - e.clientX; 
  lastY = startY - e.clientY; 

  startX = e.clientX; 
  startY = e.clientY; 

  wrap.style.top = `${wrap.offsetTop - lastY}px`;
  wrap.style.left = `${wrap.offsetLeft - lastX}px`;
}

1, 2, 3, 4에 대해 설명하겠습니다.

 

1. 상단부에 마우스를 꾹 눌렀을때 작동하게 하기 위해서 header 영역을 타겟으로 잡았습니다.

또한, 타겟에 마우스를 꾹 누른상태에서 움직일때 이벤트 발생하기 위해 mousedown 이벤트를 먼저 사용합니다.

이때 최초의 client 좌표 값을 변수에 담습니다.

 

2. mousedown시에 클래스(active)를 추가하여 스타일로 마우스커서를 바꾸어줍니다. 

 

3. 마우스를 꾹 누른것을 풀었을 경우(mouseup)에 객체가 이동되면 안되므로 내부에서 이벤트를 해제하는 함수를 바인딩해줍니다.

 

4. 핵심 함수입니다.

mousedown + mousemove가 함께 작동할 때 동작해야합니다.

이벤트 타겟은 header이나 움직이는 객체는 wrap이기때문에 좌표값을 구해서 wrap 객체 속성을 수정해줘야합니다.

mousedown에서 저장했던 client 좌표값에서 현재 client 좌표값을 뺀 값을 wrap 객체 스타일 속성으로 추가합니다.

 

 

완성된 모습입니다.

완성 예제