제이쿼리없이 마우스 드래그

탈 제이쿼리를 하기위해.. 요즘 작성하는 코드마다 열심히 자바스크립트로 하고 있다.

 

HTML :

<div id="draggableDiv">
  <h1 id="title_1">제목</h1>
  <p id="ppp">bbbb</p>
</div>

 

JS :

function drgg(){

  const draggableDiv = document.getElementById('draggableDiv');
  const title = document.querySelector("#draggableDiv > h1");
  let isDragging = false;
  let offsetX, offsetY;

  // h1 제목에 마우스 다운 이벤트를 처리.
  title.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - draggableDiv.getBoundingClientRect().left;
    offsetY = e.clientY - draggableDiv.getBoundingClientRect().top;
    title.style.cursor = 'grabbing';
  });

  // 마우스 업 이벤트를 처리.
  document.addEventListener('mouseup', () => {
    isDragging = false;
    title.style.cursor = 'grab';
  });

  // 마우스 이동 이벤트를 처리.
  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      const x = e.clientX - offsetX;
      const y = e.clientY - offsetY;

      // 드래그한 위치에 div를 이동.
      draggableDiv.style.left = x + 'px';
      draggableDiv.style.top = y + 'px';
    }
  });
}

// 아이디값 받아오기
const titleNM = document.getElementById('title_1');
const pppElement = document.getElementById('ppp');

// 마우스 오버시 함수 실행
titleNM.addEventListener('mouseover', () => {
    pppElement.textContent = titleNM.textContent;
    titleNM.style.cursor = 'grab';
    drgg();
});

 

CSS :

#draggableDiv{width: 100px; height: 100px; background-color: lightblue; position: absolute;}
h1 {border:1px solid #ff0000; }
p{border:1px solid #bbef00;}

---

미리보기 :

 

See the Pen 제이쿼리없이 마우스 드래그 by keepgoing-Noah (@keepgoing-noah) on CodePen.

---

어쩌다가 '자스'라는 용어를 처음 알게 되었다. 다름아닌... 자바스크립트를 '자스'라고 줄여서 말하는 사람들이 종종 보였다. 그야말로 내게는 대충격+문화충격쓰....