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），我们将其设置为window.event。

当你关闭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); }

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

1 个答案: