用javascript進行拖拽2)

你首先要聲明一個evnet對象．不論何時你移動滑鼠／點擊／按鍵等等，會對應一個event的事件．在Internet Explorer裡event是全域變數，會被儲存在window.event裡． 在firefox中，或者其他瀏覽器，event事件會被相應的自訂函數擷取．當我們將mouseMove函數賦值於document.onmousemove，mouseMove會擷取滑鼠移動事件．

(ev = ev || window.event) 這樣讓ev在所有瀏覽器下擷取了event事件，在Firefox下"||window.event"將不起作用，因為ev已經有了賦值．在MSIE下ev是空的，所以ev將設定為window.event.

因為我們在這篇文章中需要多次擷取滑鼠座標，所以我們設計了mouseCoords這個函數，它只包含了一個參數，就是the event.

我們需要運行在MSIE與Firefox為首的其他瀏覽器下．Firefox以event.pageX和event.pageY來代表滑鼠相應於文檔左上方的位置．如果你有一個500*500的視窗，而且你的滑鼠在正中間，那麼paegX和pageY將是250，當你將頁面往下滾動500px，那麼pageY將是750.此時pageX不變，還是250.

MSIE和這個相反，MSIE將event.clientX與event.clientY來代表滑鼠與ie視窗的位置，並不是文檔．當我們有一個500*500的視窗，滑鼠在正中間，那麼clientX與clientY也是250，如果你垂直滾動視窗到任何位置，clientY仍然是250，因為相對ie視窗並沒有變化．想得到正確的結果，我們必須加入scrollLeft與scrollTop這兩個相對於文檔滑鼠位置的屬性．最後，由於MSIE並沒有0,0的文檔起始位置，因為通常會設定2px的邊框在周圍，邊框的寬度包含在document.body.clientLeft與clientTop這兩個屬性中，我們再加入這些到滑鼠的位置中．

很幸運，這樣mouseCoords函數就完成了，我們不再為座標的事操心了．

捕捉滑鼠點擊

下次我們將知道滑鼠何時點擊與何時放開．如果我們跳過這一步，我們在做拖拽時將永遠不知道滑鼠移動上面時的動作，這將是惱人的與違反直覺的．

這裡有兩個函數協助我們:onmousedown與onmouseup.我們預先設定函數來接收document.onmousemove，這樣看起來很象我們會擷取document.onmousedown與document.onmouseup．但是當我們擷取document.onmousedown時，我們同時擷取了任何對象的點擊屬性如:text,images,tables等等.我們只想擷取那些需要拖拽的屬性，所以我們設定函數來擷取我們需要移動的對象．

運行代碼框
<script><br />function mouseDown(ev){<br />ev = ev || window.event;<br />var target = ev.target || ev.srcElement;<br />if(target.onmousedown || target.getAttribute('DragObj')){<br />return false;<br />}<br />}<br />function makeClickable(item){<br />if(!item) return;<br />item.onmousedown = function(ev){<br />document.getElementById('ClickImage').value = this.name;<br />}<br />}<br />document.onmousedown = mouseDown;<br />window.onload = function(){<br />makeClickable(document.getElementById('ClickImage1'));<br />makeClickable(document.getElementById('ClickImage2'));<br />makeClickable(document.getElementById('ClickImage3'));<br />makeClickable(document.getElementById('ClickImage4'));<br />}</script><br /><FIELDSET id=Demo3><br /><h3><br />Demo - Click any image<br /></h3><br /><IMG id=ClickImage1<br />src="/articleimg/2006/07/3791/drag_drop_spade.gif"<br />name=Spade><IMG id=ClickImage2<br />src="/articleimg/2006/07/3791/drag_drop_heart.gif"<br />name=Heart><IMG id=ClickImage3<br />src="/articleimg/2006/07/3791/drag_drop_diamond.gif"<br />name=Diamond><IMG id=ClickImage4<br />src="/articleimg/2006/07/3791/drag_drop_club.gif"<br />name=Club><br /><BR>You clicked on: <INPUT id=ClickImage type="text"> </FIELDSET>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

移動一個元素

我們知道了怎麼捕捉滑鼠移動與點擊．剩下的就是移動元素了．首先，要確定一個明確的頁面位置，css樣式表要用'absolute'.設定元素絕對位置意味著我們可以用樣式表的.top和.left來定位，可以用相對位置來定位了．我們將滑鼠的移動全部相對頁面top-left，基於這點，我們可以進行下一步了．

當我們定義item.style.position='absolute'，所有的操作都是改變left座標與top座標，然後它移動了．

document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;

var dragObject  = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
 ev = ev || window.event;

 var docPos    = getPosition(target);
 var mousePos  = mouseCoords(ev);
 return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
 var left = 0;
 var top  = 0;

 while (e.offsetParent){
  left += e.offsetLeft;
  top  += e.offsetTop;
  e     = e.offsetParent;
 }

 left += e.offsetLeft;
 top  += e.offsetTop;

 return {x:left, y:top};
}

function mouseMove(ev){
 ev           = ev || window.event;
 var mousePos = mouseCoords(ev);

 if(dragObject){
  dragObject.style.position = 'absolute';
  dragObject.style.top      = mousePos.y - mouseOffset.y;
  dragObject.style.left     = mousePos.x - mouseOffset.x;

  return false;
 }
}
function mouseUp(){
 dragObject = null;
}

function makeDraggable(item){
 if(!item) return;
 item.onmousedown = function(ev){
  dragObject  = this;
  mouseOffset = getMouseOffset(this, ev);
  return false;
 }
}