티스토리 뷰

🌈 JavaScript

div 마우스 클릭 수 이동 기능

James Wetzel 2023. 7. 24. 17:28 
<!DOCTYPE html>
<html>
<head>
  <title>Div 이동하기 예시</title>
  <style>
    #movableDiv {
      width: 100px;
      height: 100px;
      background-color: #f00;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div id="movableDiv">클릭 후 이동</div>
</body>
</html>

 

// 이동 가능한 div 요소 선택
const movableDiv = document.getElementById('movableDiv');

// 이동 가능한 상태를 저장하는 변수
let isMovable = false;

// div를 클릭할 때 호출되는 이벤트 리스너
movableDiv.addEventListener('mousedown', function(event) {
  isMovable = true; // 이동 가능한 상태로 설정
  offsetX = event.clientX - movableDiv.offsetLeft;
  offsetY = event.clientY - movableDiv.offsetTop;
});

// div를 놓을 때 호출되는 이벤트 리스너
document.addEventListener('mouseup', function() {
  isMovable = false; // 이동 불가능한 상태로 설정
});

// 마우스 이동 중 호출되는 이벤트 리스너
document.addEventListener('mousemove', function(event) {
  if (isMovable) {
    // 이동 가능한 상태일 때만 div의 위치 변경
    movableDiv.style.left = (event.clientX - offsetX) + 'px';
    movableDiv.style.top = (event.clientY - offsetY) + 'px';
  }
});
반응형
저작자표시
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함