用javascript進行拖拽3)

運行代碼框
<script><br />Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br />var iMouseDown = false;<br />var dragObject = null;<br />var curTarget = null;<br />function makeDraggable(item){<br />if(!item) return;<br />item.onmousedown = function(ev){<br />dragObject = this;<br />mouseOffset = getMouseOffset(this, ev);<br />return false;<br />}<br />}<br />function getMouseOffset(target, ev){<br />ev = ev || window.event;<br />var docPos = getPosition(target);<br />var mousePos = mouseCoords(ev);<br />return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br />}<br />function getPosition(e){<br />var left = 0;<br />var top = 0;<br />while (e.offsetParent){<br />left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br />top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br />e = e.offsetParent;<br />}<br />left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);<br />top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);<br />return {x:left, y:top};<br />}<br />function mouseCoords(ev){<br />if(ev.pageX || ev.pageY){<br />return {x:ev.pageX, y:ev.pageY};<br />}<br />return {<br />x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br />y:ev.clientY + document.body.scrollTop - document.body.clientTop<br />};<br />}<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 mouseUp(ev){<br />dragObject = null;<br />iMouseDown = false;<br />}<br />function mouseMove(ev){<br />ev = ev || window.event;<br />/*<br />We are setting target to whatever item the mouse is currently on<br />Firefox uses event.target here, MSIE uses event.srcElement<br />*/<br />var target = ev.target || ev.srcElement;<br />var mousePos = mouseCoords(ev);<br />if(dragObject){<br />dragObject.style.position = 'absolute';<br />dragObject.style.top = mousePos.y - mouseOffset.y;<br />dragObject.style.left = mousePos.x - mouseOffset.x;<br />}<br />// track the current mouse state so we can compare against it next time<br />lMouseState = iMouseDown;<br />// this prevents items on the page from being highlighted while dragging<br />if(curTarget || dragObject) return false;<br />}<br />document.onmousemove = mouseMove;<br />document.onmousedown = mouseDown;<br />document.onmouseup = mouseUp;<br />window.onload = function() {<br />makeDraggable(document.getElementById('DragImage5'));<br />makeDraggable(document.getElementById('DragImage6'));<br />makeDraggable(document.getElementById('DragImage7'));<br />makeDraggable(document.getElementById('DragImage8'));<br />}<br /></script><br /><FIELDSET id=Demo5 style="HEIGHT: 70px"><h3>Demo - Drag any of the<br />images</h3><IMG id=DragImage5<br />src="/articleimg/2006/07/3791/drag_drop_spade.gif"><IMG<br />id=DragImage6<br />src="/articleimg/2006/07/3791/drag_drop_heart.gif"><IMG<br />id=DragImage7<br />src="/articleimg/2006/07/3791/drag_drop_diamond.gif"><IMG<br />id=DragImage8<br />src="/articleimg/2006/07/3791/drag_drop_club.gif"> </FIELDSET>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

你會注意到這個代碼幾乎是前面的全集，將前面的合在一起就實現了拖拽效果了．

當我們點擊一個item時，我們就擷取了很多變數，如滑鼠位置，滑鼠位置自然就包含了那個item的座標資訊了．如果我們點擊了一個20*20px映像的正中間，那麼滑鼠的相對座標為{x:10,y:10}．當我們點擊這個映像的左上方那麼滑鼠的相對座標為{x:0,y:0}.當我們點擊時，我們用這個方法取得一些滑鼠與圖片校對的資訊．如果我們不能載入頁面item，那麼資訊將是document資訊，會忽略了點擊的item資訊．

mouseOffset函數使用了另一個函數getPosition.getPosition的作用是返回item相對頁面左上方的座標，如果我們嘗試擷取item.offsetLeft或者item.style.left，那麼我們將取得item相對與父級的位置，不是整個document．所有的指令碼我們都是相對整個document，這樣會更好一些．

為了完成getPosition任務，必須迴圈取得item的父級，我們將載入內容到item的左／上的位置．我們需要管理想要的top與left列表．

自從定義了mousemove這個函數，mouseMove就會一直運行．第一我們確定item的style.position為absolute，第二我們移動item到前面定義好的位置．當mouse點擊被釋放，dragObject被設定為null，mouseMove將不在做任何事．

Dropping an Item

前面的例子目的很簡單，就是拖拽item到我們希望到的地方．我們經常還有其他目的如刪除item，比如我們可以將item拖到垃圾桶裡，或者其他頁面定義的位置．

很不幸，我們有一個很大的難題，當我們拖拽，item會在滑鼠之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我們拖拽一個item到垃圾桶上，滑鼠資訊還在item上，不在垃圾桶上．

怎麼解決這個問題呢？有幾個方法可以來解決．第一，這是以前比較推薦的，我們在移動滑鼠時item會跟隨滑鼠，並佔用了mouseover/mousemove等滑鼠事件，我們不這樣做，只是讓item跟隨著滑鼠，並不佔用mouseover等滑鼠事件，這樣會解決問題，但是這樣並不好看，我們還是希望item能直接跟在mouse下．

另一個選擇是不做item的拖拽．你可以改變滑鼠指標來顯示需要拖拽的item，然後放在滑鼠釋放的位置．這個解決方案，也是因為美學原因不予接受．

最後的解決方案是，我們並不去除拖拽效果．這種方法比前兩種繁雜許多，我們需要定義我們需要釋放目標的列表，當滑鼠釋放時，手工去檢查釋放的位置是否是在目標列表位置上，如果在，說明是釋放在目標位置上了．

/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/

var dropTargets = [];

function addDropTarget(dropTarget){
 dropTargets.push(dropTarget);
}

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

 for(var i=0; i<dropTargets.length; i++){
  var curTarget  = dropTargets[i];
  var targPos    = getPosition(curTarget);
  var targWidth  = parseInt(curTarget.offsetWidth);
  var targHeight = parseInt(curTarget.offsetHeight);

  if(
   (mousePos.x > targPos.x)                &&

   (mousePos.x < (targPos.x + targWidth))  &&
   (mousePos.y > targPos.y)                &&
   (mousePos.y < (targPos.y + targHeight))){
    // dragObject was dropped onto curTarget!
  }
 }

 dragObject   = null;
}