亚洲午夜精品久久久久久app,亚洲欧美日韩综合久久久,午夜亚洲国产理论秋霞

[翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上)

??? 譯者：Flyingis

??? JavaScript擅長(zhǎng)于修改頁(yè)面中的DOM元素，但是我們使用JavaScript通常只是實(shí)現(xiàn)一些簡(jiǎn)單功能，例如實(shí)現(xiàn)圖片的翻轉(zhuǎn)，網(wǎng)頁(yè)中的標(biāo)簽頁(yè)，等等。這篇文章將向你展示如何在頁(yè)面中，對(duì)創(chuàng)建的元素實(shí)現(xiàn)拖放。

??? 有許多理由讓你在頁(yè)面中加入拖放的功能，其中最簡(jiǎn)單的理由是重新組織數(shù)據(jù)。舉個(gè)例子，你可能希望用戶(hù)能夠重組一系列的頁(yè)面元素，通過(guò)放置一個(gè)input或select組件在各個(gè)元素的旁邊來(lái)代表它們的順序是一種解決方案，使該組元素可以被拖放是一種替代方案。或者也許你想在網(wǎng)站上擁有一個(gè)可以被用戶(hù)移動(dòng)的導(dǎo)航窗口。這些都是使用拖放功能的簡(jiǎn)單理由，因?yàn)槟隳軌驅(qū)崿F(xiàn)！

??? 在你的網(wǎng)頁(yè)上實(shí)現(xiàn)拖放的效果并不是很復(fù)雜。首先，我們知道鼠標(biāo)的位置，然后我們需要了解用戶(hù)什么時(shí)候點(diǎn)擊一個(gè)元素，以至于我們知道要準(zhǔn)備開(kāi)始拖動(dòng)它，最后我們要移動(dòng)這個(gè)元素。

??? 捕獲鼠標(biāo)的移動(dòng)

??? 第一步，我們需要獲取鼠標(biāo)的坐標(biāo)，通過(guò)一個(gè)函數(shù)并賦給document.onmousemove可以實(shí)現(xiàn)這一功能：

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對(duì)象。不論你什么時(shí)候移動(dòng)、點(diǎn)擊鼠標(biāo)，或按鍵，等等，一個(gè)事件都會(huì)發(fā)生。在IE中，這個(gè)事件是全局的，它被存儲(chǔ)在window.event中，對(duì)于Firefox，及其他的瀏覽器來(lái)說(shuō)，這個(gè)事件將被傳遞到任何指向這個(gè)頁(yè)面動(dòng)作的函數(shù)中。因此，我們使document.onmousemove指向鼠標(biāo)移動(dòng)的函數(shù)，鼠標(biāo)移動(dòng)的函數(shù)獲得事件對(duì)象。

??? 上述代碼中，ev在所有瀏覽器環(huán)境中都包含了event對(duì)象。在Firefox里，"||window.event"將被忽略，因?yàn)樗呀?jīng)包含事件。在IE中，ev的值為空，以至于需要將它的值設(shè)置為window.event。

??? 本文中我們需要多次捕獲到鼠標(biāo)的坐標(biāo)，因此我們寫(xiě)了一個(gè)mouseCoords方法，它有一個(gè)參數(shù)：event。

??? 我們要再次討論IE和其他瀏覽器之間的差異。Firefox和其他的瀏覽器使用event.pageX和event.pageY來(lái)表示鼠標(biāo)相對(duì)于document文檔的位置。如果你有一個(gè)500*500的窗口，并且鼠標(biāo)位于窗口中間，那么pageX和pageY的值將都是250。如果你將窗口向下滾動(dòng)500象素，pageY的值為750。

??? 如此相反的是，微軟的IE使用event.clientX和event.clientY來(lái)表示鼠標(biāo)相對(duì)于window窗口的位置，而不是當(dāng)前document文檔。在相同的例子中，如果將鼠標(biāo)放置于500*500窗口的中間，clientX和clientY值將均為250。如果向下滾動(dòng)頁(yè)面，clientY將仍為250，因?yàn)樗窍鄬?duì)于window窗口來(lái)測(cè)量，而不是當(dāng)前的document文檔。因此，在鼠標(biāo)位置中，我們應(yīng)該引入document文檔body區(qū)域的scrollLeft和scrollTop屬性。最后，IE中document文檔實(shí)際并不在(0,0)的位置，在它周?chē)幸粋€(gè)小（通常有2px）邊框，document.body.clientLeft和document.body.clientTop包含了這個(gè)邊框的寬度，從而還需要在鼠標(biāo)位置中引入它們。

??? 幸運(yùn)的是，現(xiàn)在我們擁有了mouseCoords函數(shù)，不用再為獲取鼠標(biāo)位置擔(dān)心了。

??? 捕獲鼠標(biāo)的點(diǎn)擊
?
??? 下一步，我們必須知道鼠標(biāo)何時(shí)點(diǎn)擊及何時(shí)釋放。如果我們跳過(guò)這一步，只要你的鼠標(biāo)移動(dòng)經(jīng)過(guò)這些元素時(shí)，都將產(chǎn)生拖動(dòng)這些元素的效果，這是令人討厭并違反人的直覺(jué)的。

??? 在這里，有兩個(gè)函數(shù)可以幫助我們：onmousedown和onmouseup。先前我們已將document.onmousemove指向一個(gè)函數(shù)，因此從邏輯上似乎應(yīng)該使document.onmousedown和document.onmouseup都指向函數(shù)。如果我們讓document.onmousedown指向一個(gè)函數(shù)，那么這個(gè)函數(shù)將會(huì)因?yàn)槭髽?biāo)點(diǎn)擊任何元素而執(zhí)行：文本、圖像、表格，等等。我們只想頁(yè)面中特定的元素具有被拖放的功能，因此，我們可以通過(guò)如下方法實(shí)現(xiàn)：

document.onmouseup?=?mouseUp;

var?dragObject?=?null;

function?makeClickable(object)?{

??object.onmousedown?=?function()?{

??dragObject?=?this;

??}

}

function?mouseUp(ev)?{

??dragObject?=?null;

}

??? 我們現(xiàn)在有了一個(gè)變量dragObject，包含了你點(diǎn)擊的任何元素。當(dāng)你釋放鼠標(biāo)的時(shí)候，dragObject被設(shè)置為空，從而在dragObject非空的時(shí)候，我們需要進(jìn)行拖動(dòng)操作。

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

??? 續(xù)文：[翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(中)?? [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(下)

posted on 2006-10-11 16:20 Flyingis 閱讀(7412) 評(píng)論(2) 編輯收藏所屬分類(lèi): Web 客戶(hù)端技術(shù)

評(píng)論

# re: [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上) 回復(fù) 更多評(píng)論

看到廣告可真夠煩的，不過(guò)摟主還是辛苦了，等待第三篇

2006-10-13 18:16 | stoneshao

# re: [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上)[未登錄](méi) 回復(fù) 更多評(píng)論

2009-02-17 17:08 | Nicole

新用戶(hù)注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: [DWR文檔] WEB-INF 參考 DWR 中文文檔用 JavaScript 玩轉(zhuǎn) DOM Level 1 [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(下) [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(中) [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上) JavaScript 隨筆匯集 [翻譯] "this" of JavaScript JavaScript 對(duì)象的反射及應(yīng)用使用 JSON 創(chuàng)建對(duì)象

# re: [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上) 回復(fù) 更多評(píng)論

# re: [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上)[未登錄](méi) 回復(fù) 更多評(píng)論

Flyingis

[翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上)

評(píng)論

導(dǎo)航

公告

常用鏈接

留言簿(41)

我參與的團(tuán)隊(duì)

隨筆分類(lèi)

隨筆檔案

文章分類(lèi)

新聞檔案

.Net 技術(shù)

Ajax Technology

Eclipse Technology

ESRI Technology

GIS Technology

Java Technology

Linux Technology

Open Source

個(gè)人博客

精彩博客(技術(shù)類(lèi))

精彩博客(非技術(shù))

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜