바닐라js로 제목과 같은 것을 구현하려한다. 코드는 가장 아래에 첨부
배운것
- 요소의 위치를 변화시킬려면 left값과 top값을 이용하면 된다는 것을 알았다
- #circle의 display값을 relative로 주면 left, top값과 별개로
다른 문서 요소들에 의해 #circle의 위치가 마우스 위가 아니게 된다.
그래서 abosule값을 줘, body를 기준으로 위치를 잡을 수 있게 했다.
발전필요
MouseEvent 객체에서 pageX, offsetX, clientX, screenX 등 위치와 관련된 메소드들의 특성을 더 자세히 알아볼 필요성을 느꼈다.
clientX: 위 메서드는 클라이언트 영역 내의 가로,세로 좌표를 제공합니다. 여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 됩니다.
offsetX: 위 메서드는 이벤트 대상이 기준이 됩니다. ( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 화면의 기준이 아닙니다)
pageX: 위 메서드는 전체 문서를 기준으로 x,y 좌표를 반환 합니다. 스크롤 화면을 포함해서 측정합니다.
screenX: 위 메서드는 모니터 화면을 기준으로 좌표를 제공합니다. 여기서 중요한 점은 브라우저 화면이 아니라 자신의 모니터 화면 전체를 기준으로 좌표를 측정한다는 점입니다.
전체 문서를 기준으로 합니다(스크롤 화면 포함)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag And Drop</title>
<style>
*{
margin:0;
padding:0;
position: relative;
box-sizing: border-box;
}
body{
background: rgb(84, 78, 105);
color: rgb(207, 202, 209);
}
#circle{
width:50px;
height:50px;
border-radius: 50%;
border: 1px solid black;
background-color: rgb(243, 240, 54);
position: absolute;
}
</style>
</head>
<body>
<!--
<h1>
참고한 사이트
https://levelup.gitconnected.com/use-javascript-to-make-an-element-follow-the-cursor-3872307778b4
</h1>
-->
<h3>left: <span id='x'></span> ball <span id='bx'></span></h3>
<h3>top: <span id="y"></span> ball <span id="by"></span></h3>
<div id="circle"></div>
<script>
let circle = document.getElementById('circle');
let x = document.getElementById('x');
let y = document.getElementById('y');
let bx = document.getElementById('bx');
let by = document.getElementById('by');
document.addEventListener('mousemove', e=>{
circle.style.left = e.pageX-25 + 'px';
circle.style.top = e.pageY-25 + 'px';
x.innerHTML = e.pageX;
y.innerHTML = e.pageY;
bx.innerHTML = circle.style.left;
by.innerHTML = circle.style.top;
})
</script>
</body>
</html>코드를 입력하세요참고사이트
https://levelup.gitconnected.com/use-javascript-to-make-an-element-follow-the-cursor-3872307778b4
