익명함수

  const move = (e) => {

    divBox.style.left = `${e.clientX - offsetX}px`;

    divBox.style.top = `${e.clientY - offsetY}px`;

  }

보통 1회용으로 쓸 때 씀

 

 

  let offsetX, offsetY;

  const move = (e) => {

    divBox.style.left = `${e.clientX - offsetX}px`;

    divBox.style.top = `${e.clientY - offsetY}px`;

  }

  divBox.addEventListener('mousedown', (e) => {

    offsetX = e.clientX - divBox.offsetLeft;

    offsetY = e.clientY - divBox.offsetTop;

    document.addEventListener('mousemove', move);

  });

익명함수 등록. 보통 코드 흐름 상 1회만 쓸 때 쓰는 듯.

등록만 함. divBox의 left를 현재 마우스에서 계산한 offsetX px로 이동하게끔.

offset 계산하는 이유는 현재 객체에서 딱 클릭한 위치에 맞추기 위해. 그냥 바로 e.clientX로 하면 divBox의 0,0위치가 마우스에 붙어서 움직임.

 

divBox에 마우스 다운 이벤트 추가, e로 이벤트에 대한 정보를 인자로 넘기고(여기에는 여러 마우스 위치 등 엄청나게 이벤트 관련 정보가 많음.) 

 

그 다음 마우스 이동은 전체에 영향을 미쳐야 하므로 document 자체에 추가.

 

clientX : 현재 뷰포트 기준 최상단이 0 (스크롤 무시)

 

pageX : 스크롤 포함한 좌표

 

offsetX : 이벤트 발생 객체에서의 상대위치

 

screenX : 모니터 화면 기준