javascript 可以拖動的DIV（二）

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的話，那就是firefox等支援W3C DOM標準的瀏覽器，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("onmouseup",upHandler);
//document.attachEvent("onmouseout",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
//這兒的判斷依然是考慮了不同的瀏覽器，stopPropagation是W3C DOM標準中使用的一個方法，用來取消事件的傳播。我們使用了document.addEventListener這個方法，瀏覽器會從document對象沿著DOM節點向下傳播到目標節點，註冊的事件處理常式就會運行，然後事件會回傳到父節點，如果父節點也有相應的事件處理常式，那麼事件也會處理，為了避免這種情況，我們可以用stopPropagation來阻止事件的傳播，這個方法的作用就是讓其他元素對這個事件不可見。在IE6下，並沒有元素捕捉事件的過程，不過有這個術語叫做起泡的過程，IE6中所用的方法就是cancelBubble，用來取消起泡，表示這個事件已被處理，其他元素不用再看見了。
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//這兒的preventDefault用來通知瀏覽器不要執行與事件關聯的預設動作，returnValue用來取消發生事件的源元素的預設動作，大家應該能看出這是在不同瀏覽器下發揮相同的作用。
//以下就是拖動div中所用的關鍵函數了。
function moveHandler(e)
{
　　 if (!e) e=window.event; //如果是IE的事件對象，那麼就用window.event
　　 //全域屬性，否則就用DOM二級標準的Event對象。
//在IE中，event是window的一個屬性，也就是一個全域變數，但是在W3C DOM中，event是發生事件的文檔對象的屬性。在這個程式中，event是什麼並不重要，關鍵是我們要取得滑鼠的座標值，在IE中，e這個參數傳進來的時候，IE認不出來，所以我們就給e賦值為window.event。
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 e.cancelBubble=true;
}
}
指令碼之家 編輯註：如果不能正常運行 注意字元的替換，因為好多網站為了安裝都將字元轉換成了中文下的標點符號。本站也盡量的替換。