JavaScript - 마우스 이벤트로 DIV 이동시키기 (mousemove)

CSS 소스

<style>
    div {
        /* 기본 스태틱에서는 좌표 적용이 안됨 */
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        font-size: 30px;
        background-color: palegreen;
        color: blue;
    }
</style>

 

HTML 소스

<div>이동</div>

 

스크립트

<script>
    var div = document.querySelector("div");

    //document.addEventListener("mousemove", function(e){
    // div안에 mouse가 들어가는순간 마우스 좌표를 기준으로 div 위치를 이동
    div.addEventListener("mousemove", function (e) {
        div.style.left = e.clientX + "px";
        div.style.top = e.clientY + "px";
    });
</script>

 

결과