0

私は2つの単純な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内の動きを制限したいと思います。いくつかの助けをいただければ幸いです。

ありがとう。

4

1 に答える 1

0

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);
}
于 2012-08-19T01:02:15.523 に答える