可以拖動的div 實現代碼第1/2頁

要實現div的任意拖動，我們不妨分析一下整個過程。
當滑鼠點擊div時，觸發一個事件，讓div的位置屬性（left，top）隨著滑鼠位置變化而變化，當滑鼠釋放後，div的位置屬性就用了滑鼠釋放時的位置。
滑鼠點擊時觸發事件是很容易做到的，只要在div的標籤裡加上onmouseclick就可以了，現在我們要解決的問題是如何讓div的位置隨著滑鼠的位置變化而變化。
雖然這可能是一個很簡單的推理過程，不過還是羅嗦點說清楚吧。div的left和top是div左上方的座標，當我們把滑鼠移到div中點擊的時候，無疑滑鼠的座標和div的座標是不一致的，這時候如果我們簡單的讓div的座標等於滑鼠的座標，那麼看起來的效果就不是那麼完美了，所以我們先要得到滑鼠的座標和div座標的差，然後在滑鼠移動到的時候，在滑鼠座標上減去這個差來得到div的座標（如果不太明白，那就先補習一下網頁的基礎知識）。
接下來的事情就簡單了，當滑鼠移動的時候，我們不斷的計算得到div的座標，並改變，在滑鼠釋放的時候，這個事件就被移除。
整個js函數如下：
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
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;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
　　if (!e) e=window.event; //如果是IE的事件對象，那麼就用window.event
　　//全域屬性，否則就用DOM二級標準的Event對象。
elementToDrag.style.left=(e.clientX-deltaX)+”px”;
elementToDrag.style.top=(e.clientY-deltaY)+”px”;
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;
}