move and limit motion of a div inside an other div

Question

I have two simple divs, where one is contained inside an other

div#numero{
    position:absolute;
    background-color:#ff3324;
    border-style: solid;
    border-width: 2px;
    width:30px;
    height:30px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    font-size:1em;
    line-height: 30px;
    text-align:center;
    margin-left:0;
    margin-right:0;
};

div#cont{
    position:relative;
    border-style: solid;
    border-width: 2px;
    width:500px;
    height:500px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
}

I want to move the first inner div inside the container

    <div id = "cont" onmousemove = "moveDiv()">
        <div id = "numero">
            1        
        </div>
     </div>

where the moveDiv is simply

function moveDiv()
{
    var e = document.all["numero"]
    x = window.event.clientX ;
    y = window.event.clientY ;

    e.style.left = x +"px";
    e.style.top = y +"px";


}

The code does not work as I would like. There's a very big offset between the position where the mouse is and where the inner div (numero) gets moved. I'd also like to limit the movement inside the container div. Some help would be appreciated.

thanks.

Answer 1

See http://jsfiddle.net/enHmy/

Add the following code after your html code

document.getElementById('cont').onmousemove=moveDiv;

And then your function should be:

function moveDiv(e){
    if(!e){e=window.event;}
    var el = document.getElementById('numero');
    x = e.clientX-this.offsetLeft-this.clientLeft-el.offsetWidth/2;
    y = e.clientY-this.offsetTop-this.clientTop-el.offsetHeight/2;

    el.style.left = Math.min(Math.max(0,x),this.clientHeight-el.offsetWidth) +"px";
    el.style.top = Math.min(Math.max(0,y),this.clientHeight-el.offsetHeight) +"px";
}

But let's analyse your function:

Why do you use document.all["numero"] ? That's very old and doesn't work on compliant browsers, now it's document.getElementById('numero'); .

And then you use window.event . That works on IE, but you should pass an argument e (the event) and, if e is not defined (it's old IE), we set it to window.event .

And when you are closing a CSS rule, don't write a semicolon after } .

Edit:

If you scroll the page, numero is not positioned correctly.

Fixed in http://jsfiddle.net/enHmy/1/ :

function moveDiv(e){
    if(!e){e=window.event;}
    var el = document.getElementById('numero');
    x = e.clientX-this.offsetLeft-this.clientLeft-el.offsetWidth/2+getScroll('Left');
    y = e.clientY-this.offsetTop-this.clientTop-el.offsetHeight/2+getScroll('Top');

    el.style.left = Math.min(Math.max(0,x),this.clientHeight-el.offsetWidth) +"px";
    el.style.top = Math.min(Math.max(0,y),this.clientHeight-el.offsetHeight) +"px";
}
function getScroll(dir){
    return Math.max(document.body["scroll"+dir]||0,document.documentElement["scroll"+dir]||0);
}