IE/FF_html/css_WEB-ITnose と互換性のあるシンプルなマウス ドラッグ可能な div

単純なドラッグ可能な div。マウスの移動に合わせて div も移動できます

主なアイデア:

div は、onmousedown イベントをリッスンするために登録し、取得したオブジェクトを処理します。関連する値 (オブジェクトの高さ、clientX/clientY の位置など)

その後、onmousemove イベントの監視に切り替え、マウス移動イベントの div オブジェクトの位置属性を更新します

マウスが放されると、監視が解除され、位置更新が完了します。

注意すべき 2 つのポイント:

1. オブジェクトの位置を更新するには、o.style.left などを使用する必要があります。これらの CSS プロパティはインラインでのみアクセスできます:

<div id="box" style="left:200px;top:200px;"> box </div>

ではアクセスできません:

#box{position: absolute;left:200px;top:200px;width: 200px;}

これを実行すると、値を取得できないことが表示されます。例を参照してください:

//    alert(e.clientX+"  -- " + o.style.left+" -- "+ X);

The結果は次のとおりです: (詳細は以下のコードを参照)

2. FireFox では、イベント オブジェクトを直接取得することはできません。ここで、e はパラメーターです。 FF の関数に対応する部分

例:

 document.getElementById("box").onmousedown = function(e){         getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE    };

もちろん、場合によっては次のことも考慮できます: グローバル オブジェクトの引数[0] を使用して、キャプチャされたイベント パラメータを置き換えます

//    dis = arguments[0]||window.event;   //如果上面那句在FF下无法获取事件，听说可以通过 arguments[0]获取FF下的事件对象

ドラッグの場合イベントをドロップするには、別の一般的なメソッドがここで使用されます:

// document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉        document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  // document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉        document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

最後はマウスでドラッグできる div です

コードとコメントを理解していただければ幸いです:

    
        <div id="box" style="left:200px;top:200px;"> box </div>