Cannot move "div" on handling "onclick" event

Question

I would like to click on a div and that div would be moved and the div should follow my mouse.

What I have:

<div onclick="myFunction()" id="move"></div>


<script>
    function myFunction(){
        var div = document.getElementById('move');
        document.addEventListener('mousemove', function (e){
        div.style.left=e.pageX+"px";
        div.style.top=e.pageY+"px";
    });}
</script>

Answer 1

Add this css:

div{
    position:absolute;
}

DEMO

Answer 2

Another thing you need is you need to set "Position:absolute" for the style of div.