<!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>Title</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
</style>
</head>
<body>
<button id="haha">haha</button>
<p>Drag the ball.</p>
<img src="벽화방.jpg" id="gate" class="droppable">
<img src="우작은진역장.png" id="ball">
<script>
let pagex;
let pagey;
// 잠재적 드롭 가능한 요소
let currentDroppable = null;
document.getElementById('ball').onmousedown = function (event) {
let shiftX = event.clientX - document.getElementById('ball').getBoundingClientRect().left;
let shiftY = event.clientY - document.getElementById('ball').getBoundingClientRect().top;
document.getElementById('ball').style.position = 'absolute';
document.getElementById('ball').style.zIndex = 1000;
document.body.append(document.getElementById('ball'));
moveAt(event.pageX, event.pageY);
pagex = event.pageX;
pagey = event.pageY;
function moveAt(pageX, pageY) {
document.getElementById('ball').style.left = pageX - shiftX + 'px';
document.getElementById('ball').style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
ball.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY); // elemBelow : 드롭할 수 있는 공의 아래 요소, 축구골대
document.getElementById('ball').hidden = false;
// 공을 윈도우 밖으로 드래그 했을 때,
// clientX, clientY 가 윈도우 밖에 있으면, elementFromPoint 는 null 반환
if (!elemBelow) return;
// 잠재적으로 드롭할 수 있는 요소를 'droppable' 클래스로 지정한다. 축구 골대
let droppableBelow = elemBelow.closest('.droppable');
// 둘다 null 일 수 있다. 들어오거나, 나가거나에 해당할 때,
// currentDroppale = null : 축구 골대 밖에 있을 때,
// droppableBelow = null : 이벤트 동안 축구 골대 안에 없을 때,
if (currentDroppable != droppableBelow) {
if (currentDroppable) {
// 축구 골대 밖에 있을 때 강조 제거
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null if we're not coming over a droppable now
// 축구 골대 안으로 들어오는 것을 처리하는 로직
enterDroppable(currentDroppable);
}
}
pagex = event.pageX;
pagey = event.pageY;
}
document.addEventListener('mousemove', onMouseMove);
document.getElementById('ball').onmouseup = function () {
document.removeEventListener('mousemove', onMouseMove);
document.getElementById('ball').onmouseup = null;
};
};
function enterDroppable(elem) {
elem.style.background = 'pink';
}
function leaveDroppable(elem) {
elem.style.background = '';
}
document.getElementById('ball').ondragstart = function () {
return false;
};
document.getElementById('haha').addEventListener('click',function (){
{
console.log('시발');
console.log(pagex);
console.log(pagey);
}
})
</script>
</body>
<script>
</script>
</html>
댓글 영역