javascript - 在另一个 div 内移动和限制一个 div 的运动

Question

我有两个简单的 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>

moveDiv 就在这里

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


}

代码无法正常工作。鼠标所在的位置与内部 div (numero) 移动的位置之间存在很大的偏移量。我还想限制容器 div 内的移动。 一些帮助将不胜感激。

谢谢。

Answer 1

参见 http://jsfiddle.net/enHmy/

在你的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)，我们将它设置为 窗口事件.

并且当您关闭 CSS 规则时，不要在 之后写分号。

编辑:

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

修复于 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);
}