简体   繁体   English

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

[英]move and limit motion of a div inside an other div

I have two simple divs, where one is contained inside an other 我有两个简单的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;
}

I want to move the first inner div inside the container 我想在容器内移动第一个内部div

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

where the moveDiv is simply 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";


}

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. 鼠标所在的位置与内部div(数字)的移动位置之间存在很大的偏移。 I'd also like to limit the movement inside the container div. 我还想限制容器div内的移动。 Some help would be appreciated. 一些帮助,将不胜感激。

thanks. 谢谢。

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

Add the following code after your html code 在您的html代码之后添加以下代码

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"] ? 为什么使用document.all["numero"] That's very old and doesn't work on compliant browsers, now it's document.getElementById('numero'); 这很老了,无法在兼容的浏览器上运行,现在是document.getElementById('numero'); .

And then you use window.event . 然后使用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 . 这适用于IE,但您应传递参数e (事件),如果未定义e (它是旧的IE),则将其设置为window.event

And when you are closing a CSS rule, don't write a semicolon after } . 而且,当您关闭CSS规则时,请不要在}之后写分号。

Edit: 编辑:

If you scroll the page, numero is not positioned correctly. 如果滚动页面,则numero位置不正确。

Fixed in http://jsfiddle.net/enHmy/1/ : 已在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);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM