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

捕捉滑鼠點擊

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

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

　　觀看範例

移動一個元素

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

　　當我們定義 item.style.position='absolute'，所有的操作都是改變 left 坐標與 top 坐標，然後它移動了。
<br />document.onmousemove = mouseMove;<br />document.onmouseup = mouseUp;<br /><br />var dragObject = null;<br />var mouseOffset = null;<br /><br />function getMouseOffset(target, ev){<br /> ev = ev || window.event;<br /><br /> var docPos = getPosition(target);<br /> var mousePos = mouseCoords(ev);<br /> return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};<br />}<br /><br />function getPosition(e){<br /> var left = 0;<br /> var top = 0;<br /><br /> while (e.offsetParent){<br /> left += e.offsetLeft;<br /> top += e.offsetTop;<br /> e = e.offsetParent;<br /> }<br /><br /> left += e.offsetLeft;<br /> top += e.offsetTop;<br /><br /> return {x:left, y:top};<br />}<br /><br />function mouseMove(ev){<br /> ev = ev || window.event;<br /> var mousePos = mouseCoords(ev);<br /><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 /> return false;<br /> }<br />}<br />function mouseUp(){<br /> dragObject = null;<br />}<br /><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 />
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙一﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙二﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙三﹚
。用 JavaScript 實現滑鼠拖拽網頁表單 ﹙四﹚

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