Javascript 移动并限制一个div在另一个div内的移动

我有两个简单的div，其中一个包含在另一个中

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;
}

我想移动容器内的第一个内部div

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

代码不能像我希望的那样工作。鼠标所在位置和内部div（numero）移动位置之间有很大的偏移。我还想限制container div内的移动。 我们将非常感谢您的帮助

谢谢。

请参阅

在html代码之后添加以下代码

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

然后你的功能应该是：

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";
}

但让我们分析一下您的功能：

为什么要使用

document.all[“numero”]

？这是非常古老的，在兼容浏览器上不起作用，现在是

document.getElementById（'numero'）

然后使用
window.event
。这适用于IE，但您应该传递一个参数
e
（事件），如果未定义
e
（它是旧IE），我们将其设置为
window.event

关闭CSS规则时，不要在
}
之后写分号

编辑：

如果滚动页面，
numero
的位置不正确

固定在：

做一个jsfiddle：人们会帮你看
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";
}

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);
}