Javascript CSS3

click to move elements

by James Doyle

HTML

<div id="stage">
<div id="ball"></div>
</div>

CSS

p{padding-left:60px;}

#ball{
border-radius:50px;
width:50px;
height:50px;
background:#ddd;
position:absolute;
top:0;
left:0;
-moz-transition: all 0.2s; 
-webkit-transition: all 1s;  
-ms-transition: all 1s;  
-o-transition: all 1s;  
transition: all 1s;  
}

#stage {
    height:800px;
    width:480px;
    background:#333;
}

JavaScript

var ball = document.getElementById('ball');
document.addEventListener('click', function(ev){
    if (ev.clientX<450 && ev.clientY<770) {    
        ball.style.left = (ev.clientX-25)+'px';
        ball.style.top = (ev.clientY-25)+'px'; 
    } else {
                       
    }
},false);