JavaScript のドラッグ可能な DIV (2)_JavaScript スキル

function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left)
var deltaY=event.clientY-parseInt(elementToDrag.style.top); >//ここでの deltaX/Y は、実際にはマウスと div の間の座標の差です。
if(document.addEventListener)
//ここでこのような判定を加えているのは、IE6 と Firefox では JavaScript イベント処理の方式が異なるためです (IE7 以降のバージョンは W3C 標準に準拠し始めています)。
//document.addEventlistener が true の場合、W3C DOM 標準をサポートするブラウザは Firefox などであり、IE6 ではイベントの登録に AttachEvent が使用されますが、Firefox などのブラウザでは addEventListener が使用されます。 addEventListener 関数の true パラメータは、イベントをキャプチャできることを示します。
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
//document.addEventListener("mouseout",upHandler); , true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
//document.attachEvent("onmouseout",upHandler);
if(event.stopPropagation)event.stopPropagation();
elseevent.cancelBubble=true;ここでの判断では、引き続きさまざまなブラウザーが考慮されます。 stopPropagation は、イベントの伝播をキャンセルするために W3C DOM 標準で使用されるメソッドです。 document.addEventListener メソッドを使用しました。ブラウザは、ドキュメント オブジェクトから DOM ノードに伝播し、登録されたイベント ハンドラーが実行され、親ノードにもイベントが返されます。対応するイベント ハンドラーを使用すると、イベントも処理されます。この状況を回避するには、stopPropagation を使用してイベントの伝播を防止します。このメソッドの機能は、このイベントに対して他の要素を非表示にすることです。 IE6 では、要素がイベントをキャプチャするプロセスはありませんが、バブル プロセスと呼ばれるメソッドがあり、IE6 で使用されるメソッドは cancelBubble で、イベントが処理され、他の要素が不要になったことを示します。見られること。
if(event.preventDefault)event.preventDefault();
elseevent.returnValue=false;
//ここでのPreventDefaultは、イベントに関連付けられたデフォルトのアクションを実行しないようにブラウザに通知するために使用されます。 returnValue は、イベントが発生したソース要素のデフォルトのアクションをキャンセルするために使用されます。これがさまざまなブラウザーで同じ役割を果たすことがわかるはずです。
//以下は div のドラッグに使用される主な関数です。
function moveHandler(e)
{
if (!e) e=window.event; //IE イベント オブジェクトの場合は window.event を使用します
//それ以外の場合はグローバル属性DOM の第 2 レベルの標準 Event オブジェクトを使用するだけです。
//IE では、event はグローバル変数である window の属性ですが、W3C DOM では、event はイベントが発生するドキュメントオブジェクトの属性です。このプログラムでは、イベントが何であるかは重要ではありません。IE では e パラメータが渡されると、それを認識できないため、e を代入します。ウィンドウ.イベント。
elementToDrag.style.left=(e.clientX-deltaX) "px";
elementToDrag.style.top=(e.clientY-deltaY) "px"; これが変更点です。使用される div の left および top 属性。
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
//この関数は、比較的単純です。詳細には立ち入りません。
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else
}
}
Script House 編集者からの注意: 多くの Web サイトでは文字を中国語の句読点に変換してインストールしているため、正常に動作しない場合は文字の置き換えに注意してください。当サイトも全力で置き換えを行っております。