javascript 拖放效果實現代碼
2024-05-06 14:11:45
供稿：網友
有許多理由讓你在頁面中加入拖放的功能，其中最簡單的理由是重新組織數據。舉個例子，你可能希望用戶能夠重組一系列的頁面元素，通過放置一個input或 select組件在各個元素的旁邊來代表它們的順序是一種解決方案，使該組元素可以被拖放是一種替代方案?；蛘咭苍S你想在網站上擁有一個可以被用戶移動的導航窗口。這些都是使用拖放功能的簡單理由，因為你能夠實現！
在你的網頁上實現拖放的效果并不是很復雜。首先，我們知道鼠標的位置，然后我們需要了解用戶什么時候點擊一個元素，以至于我們知道要準備開始拖動它，最后我們要移動這個元素。
捕獲鼠標的移動
第一步，我們需要獲取鼠標的坐標，通過一個函數并賦給document.onmousemove可以實現這一功能：
代碼
代碼如下:
document.onmousemove = mouseMove;
function mouseMove(ev) {
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev) {
if(ev.pageX || ev.pageY) {
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
首先我們需要解釋一下event對象。不論你什么時候移動、點擊鼠標，或按鍵，等等，一個事件都會發生。在IE中，這個事件是全局的，它被存儲在 window.event中，對于Firefox，及其他的瀏覽器來說，這個事件將被傳遞到任何指向這個頁面動作的函數中。因此，我們使 document.onmousemove指向鼠標移動的函數，鼠標移動的函數獲得事件對象。
上述代碼中，ev在所有瀏覽器環境中都包含了event對象。在Firefox里，"||window.event"將被忽略，因為它已經包含事件。在IE中，ev的值為空，以至于需要將它的值設置為window.event。
本文中我們需要多次捕獲到鼠標的坐標，因此我們寫了一個mouseCoords方法，它有一個參數：event。
我們要再次討論IE和其他瀏覽器之間的差異。Firefox和其他的瀏覽器使用event.pageX和event.pageY來表示鼠標相對于 document文檔的位置。如果你有一個500*500的窗口，并且鼠標位于窗口中間，那么pageX和pageY的值將都是250。如果你將窗口向下滾動500象素，pageY的值為750。
如此相反的是，微軟的IE使用event.clientX和event.clientY來表示鼠標相對于window窗口的位置，而不是當前 document文檔。在相同的例子中，如果將鼠標放置于500*500窗口的中間，clientX和clientY值將均為250。如果向下滾動頁面， clientY將仍為250，因為它是相對于window窗口來測量，而不是當前的document文檔。因此，在鼠標位置中，我們應該引入 document文檔body區域的scrollLeft和scrollTop屬性。最后，IE中document文檔實際并不在(0,0)的位置，在它周圍有一個?。ㄍǔＳ?px）邊框，document.body.clientLeft和document.body.clientTop包含了這個邊框的寬度，從而還需要在鼠標位置中引入它們。
