棒球比分怎么算:Flyingis

Talking and thinking freely !
Flying in the world of GIS !
隨筆 - 156, 文章 - 16, 評論 - 589, 引用 - 0
數據加載中……

[翻譯] 如何在 JavaScript 中實現拖放(上)

??? 譯者:Flyingis

??? JavaScript擅長于修改頁面中的DOM元素,但是我們使用JavaScript通常只是實現一些簡單功能,例如實現圖片的翻轉,網頁中的標簽頁,等等。這篇文章將向你展示如何在頁面中,對創建的元素實現拖放。

??? 有許多理由讓你在頁面中加入拖放的功能,其中最簡單的理由是重新組織數據。舉個例子,你可能希望用戶能夠重組一系列的頁面元素,通過放置一個input或select組件在各個元素的旁邊來代表它們的順序是一種解決方案,使該組元素可以被拖放是一種替代方案?;蛘咭殘砟閬朐諭舊嫌滌幸桓隹梢員揮沒б貧牡己醬翱?。這些都是使用拖放功能的簡單理由,因為你能夠實現!

??? 在你的網頁上實現拖放的效果并不是很復雜。首先,我們知道鼠標的位置,然后我們需要了解用戶什么時候點擊一個元素,以至于我們知道要準備開始拖動它,最后我們要移動這個元素。

??? 捕獲鼠標的移動

??? 第一步,我們需要獲取鼠標的坐標,通過一個函數并賦給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)的位置,在它周圍有一個?。ㄍǔS?px)邊框,document.body.clientLeft和document.body.clientTop包含了這個邊框的寬度,從而還需要在鼠標位置中引入它們。

??? 幸運的是,現在我們擁有了mouseCoords函數,不用再為獲取鼠標位置擔心了。

??? 捕獲鼠標的點擊
?
??? 下一步,我們必須知道鼠標何時點擊及何時釋放。如果我們跳過這一步,只要你的鼠標移動經過這些元素時,都將產生拖動這些元素的效果,這是令人討厭并違反人的直覺的。

??? 在這里,有兩個函數可以幫助我們:onmousedown和onmouseup。先前我們已將document.onmousemove指向一個函數,因此從邏輯上似乎應該使document.onmousedown和document.onmouseup都指向函數。如果我們讓document.onmousedown指向一個函數,那么這個函數將會因為鼠標點擊任何元素而執行:文本、圖像、表格,等等。我們只想頁面中特定的元素具有被拖放的功能,因此,我們可以通過如下方法實現:

document.onmouseup?=?mouseUp;
var?dragObject?=?null;
function?makeClickable(object)?{
??object.onmousedown?
=?function()?{
??dragObject?
=?this;
??}

}

function?mouseUp(ev)?{
??dragObject?
=?null;
}

??? 我們現在有了一個變量dragObject,包含了你點擊的任何元素。當你釋放鼠標的時候,dragObject被設置為空,從而在dragObject非空的時候,我們需要進行拖動操作。

??? 原文鏈接://www.webreference.com/programming/javascript/mk/column2/index.html

??? 續文:[翻譯] 如何在 JavaScript 中實現拖放(中)?? [翻譯] 如何在 JavaScript 中實現拖放(下)

棒球比分大小怎么算 www.355548.live posted on 2006-10-11 16:20 Flyingis 閱讀(7151) 評論(2)  編輯  收藏 所屬分類: Web 客戶端技術

評論

# re: [翻譯] 如何在 JavaScript 中實現拖放(上)  回復  更多評論   

看到廣告可真夠煩的,不過摟主還是辛苦了,等待第三篇
2006-10-13 18:16 | stoneshao

# re: [翻譯] 如何在 JavaScript 中實現拖放(上)[未登錄]  回復  更多評論   

0
2009-02-17 17:08 | Nicole
{ganrao}