用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚

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

　　當我們點擊一個 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，然後放在滑鼠釋放的位置。個解決方案，也是因為美學原因不予接受。

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

<br />/*<br />All code from the previous example is needed with the exception<br />of the mouseUp function which is replaced below<br />*/<br /><br />var dropTargets = [];<br /><br />function addDropTarget(dropTarget){<br /> dropTargets.push(dropTarget);<br />}<br /><br />function mouseUp(ev){<br /> ev = ev || window.event;<br /> var mousePos = mouseCoords(ev);<br /><br /> for(var i=0; i<dropTargets.length; i++){<br /> var curTarget = dropTargets[i];<br /> var targPos = getPosition(curTarget);<br /> var targWidth = parseInt(curTarget.offsetWidth);<br /> var targHeight = parseInt(curTarget.offsetHeight);<br /><br /> if(<br /> (mousePos.x > targPos.x) &&<br /><br /> (mousePos.x < (targPos.x + targWidth)) &&<br /> (mousePos.y > targPos.y) &&<br /> (mousePos.y < (targPos.y + targHeight))){<br /> // dragObject was dropped onto curTarget!<br /> }<br /> }<br /><br /> dragObject = null;<br />}<br />
　　觀看範例

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

。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

今天因為要寫關於 JavaScript 捕捉滑鼠位置的程式，很意外的被我找到這篇文章，常常在很多網站看到大家用這樣的技術來做版面編排，但是都苦無方法來研究，看到了這篇文章讓我欣喜若狂，所以我擅自轉貼到我的筆記上，再找時間好好研究研究，為尊重原作者做以下申明︰ 原文︰How to Drag and Drop in JavaScript 作者︰Mark Kahn 譯者︰雪山老人 所有本文及範例檔案相關版權為以上作者所有。