마우스 클릭한 위치에 element 이동하기

April 1, 2022

Markup

<div class='box'></div>

CSS

.box {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid black;
    background: red;
    transition: 2s;
}

Click Event

클릭한 위치 값 확인

clientX, clientY 클릭한 위치 값을 알려준다.

window.addEventListener('click', function(e) {
    console.log(e.clientX, e.clientY)
})

box element를 클릭한 위치로 이동

const ele = document.querySelector('.box');
window.addEventListener('click', function(e) {
    ele.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`
})

transitionend 이벤트로 효과주기

.box.end {
   background: green;
}

const ele = document.querySelector('.box');
window.addEventListener('transitionend', function(e) {
    ele.classList.add('end')
})

참고

MouseEvent.clientX official

transitionend event official