用javascript進行拖拽4)

運行代碼框
<script><br />var iMouseDown = false;<br />var dragObject = null;<br />Number.prototype.NaN0=function(){return isNaN(this)?0:this;}<br />// Demo 0 variables<br />var DragDrops = [];<br />var curTarget = null;<br />var lastTarget = 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 />if(dragObject){<br />ev = ev || window.event;<br />var mousePos = mouseCoords(ev);<br />var dT = dragObject.getAttribute('droptarget');<br />if(dT){<br />var targObj = document.getElementById(dT);<br />var objPos = getPosition(targObj);<br />if((mousePos.x > objPos.x) && (mousePos.y > objPos.y)<br />&& (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth)))<br />&& (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){<br />var nSrc = targObj.getAttribute('newSrc');<br />if(nSrc){<br />dragObject.src = nSrc;<br />setTimeout(function(){<br />if(!dragObject || !dragObject.parentNode) return;<br />dragObject.parentNode.removeChild(dragObject);<br />dragObject = null;<br />}, parseInt(targObj.getAttribute('timeout')));<br />} else {<br />dragObject.parentNode.removeChild(dragObject);<br />}<br />}<br />}<br />}<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 />function addDropTarget(item, target){<br />item.setAttribute('droptarget', target);<br />}<br />document.onmousemove = mouseMove;<br />document.onmousedown = mouseDown;<br />document.onmouseup = mouseUp;<br />window.onload = function (){<br />makeDraggable(document.getElementById('DragImage9'));<br />makeDraggable(document.getElementById('DragImage10'));<br />makeDraggable(document.getElementById('DragImage11'));<br />makeDraggable(document.getElementById('DragImage12'));<br />addDropTarget(document.getElementById('DragImage9'), 'TrashImage1');<br />addDropTarget(document.getElementById('DragImage10'), 'TrashImage1');<br />addDropTarget(document.getElementById('DragImage11'), 'TrashImage1');<br />addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');<br />}<br /></script><br /><FIELDSET id=Demo6 style="HEIGHT: 70px"><h3>Demo - Drag any image onto the<br />trashcan</h3><IMG id=TrashImage1<br />src="/articleimg/2006/07/3791/drag_drop_trash.gif"<br />timeout="600" newSrc="/articleimg/2006/07/3791/transparent.gif"><br /><IMG<br />id=DragImage9<br />src="/articleimg/2006/07/3791/drag_drop_spade.gif"><br /><IMG<br />id=DragImage10<br />src="/articleimg/2006/07/3791/drag_drop_heart.gif"><br /><IMG<br />id=DragImage11<br />src="/articleimg/2006/07/3791/drag_drop_diamond.gif"><br /><IMG<br />id=DragImage12<br />src="/articleimg/2006/07/3791/drag_drop_club.gif"><br /></FIELDSET>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

滑鼠釋放時會去取是否有drop屬性，如果存在，同時滑鼠指標還在drop的範圍內，執行drop操作．我們檢查滑鼠指標位置是否在目標範圍是用(mousePos.x>targetPos.x)，而且還要符合條件(mousePos.x<(targPos.x + targWidth))．如果所有的條件符合，說明指標確實在範圍內，可以執行drop指令了．

Pulling It All Together

最後我們擁有了所有的drag/drop的指令碼片斷！下一個事情是我們將建立一個DOM處理．如果你不是很熟悉，請先閱讀我的JavaScript Primer on DOM Manipulation.

下面的代碼將建立container(容器),而且使任何一個需要drag/drop的item變成一個容器的item.代碼在這個文章第二個demo的後面，它可以使用者記錄一個list(列表)，定為一個導航視窗在左邊或者右邊，或者更多的函數你可以想到的．

下一步我們將通過"假代碼"讓reader看到真代碼，下面為推薦:

1、當document第一次載入時，建立dragHelper DIV.dragHelper將給移動的item加陰影．真實的item沒有被dragged，只是用了insertBefor和appendChild來移動了，我們隱藏了dragHelper

2、有了mouseDown與mouseUp函數．所有的操作會對應到當到iMouseDown的狀態中，只有當mouse左鍵為按下時iMouseDown才為真，否則為假．

3、我們建立了全域變數DragDrops與全域函數CreateDragContainer.DragDrops包含了一系列相對彼此的容器．任何參數(containers)將通過CreatedcragContainer進行重組與序列化，這樣可以自由的移動．CreateDragContainer函數也將item進行綁定與設定屬性．

4、現在我們的代碼知道每個item的加入，當我們移動處mouseMove，mouseMove函數首先會設定變數target，滑鼠移動在上面的item，如果這個item在容器中(checked with getAttribute):

• 運行一小段代碼來改變目標的樣式．創造rollover效果
• 檢查滑鼠是否沒有放開，如果沒有
  • 設定curTarget代表當前item
  • 記錄item的當前位置，如果需要的話，我們可以將它返回
  • 複製當前的item到dragHelper中，我們可以移動帶陰影製作效果的item.
  • item拷貝到dragHelper後，原有的item還在滑鼠指標下，我們必須刪除掉dragObj，這樣指令碼起作用，dragObj被包含在一個容器中．
  • 抓取容器中所有的item當前座標，高度/寬度，這樣只需要記錄一次，當item被drag時，每隨mouse移動，每移鐘就會記錄成千上萬次．
• 如果沒有，不需要做任何事，因為這不是一個需要移動的item

5、檢查curTarget，它應該包含一個被移動的item,如果存在，進行下面操作：

• 開始移動帶有陰影的item，這個item就是前文所建立的
• 檢查每個當前容器中的container，是否滑鼠已經移動到這些範圍內了
  • 我們檢查看一下正在拖動的item是屬於哪個container
  • 放置item在一個container的某一個item之前，或者整個container之後
  • 確認item是可見的
• 如果滑鼠不在container中，確認item是不可見了．

6、剩下的事就是捕捉mouseUp的事件了