<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    
	
    
		
			

    

    Flyingis
    

    Talking and thinking freely !
    
Flying in the world of GIS !
    

    

    

    隨筆 - 156, 文章 - 16, 評論 - 589, 引用 - 0
    

    


    		
	
    

    

    
	
    
		
			
    
				數(shù)據(jù)加載中……
			
    
		    		
		
			
    
				
					
	
    
		
    
			[翻譯] 如何在 JavaScript 中實現(xiàn)拖放(上)
		
    
		
    
		
		
				??? 譯者：Flyingis

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

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

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

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

    ??? 第一步，我們需要獲取鼠標(biāo)的坐標(biāo)，通過一個函數(shù)并賦給document.onmousemove可以實現(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對象。不論你什么時候移動、點擊鼠標(biāo)，或按鍵，等等，一個事件都會發(fā)生。在IE中，這個事件是全局的，它被存儲在window.event中，對于Firefox，及其他的瀏覽器來說，這個事件將被傳遞到任何指向這個頁面動作的函數(shù)中。因此，我們使document.onmousemove指向鼠標(biāo)移動的函數(shù)，鼠標(biāo)移動的函數(shù)獲得事件對象。

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

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

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

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

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

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

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

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

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

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

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

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


	


    
	    
    


    

    評論
    
	
	
			
    
				
    
					# re: [翻譯] 如何在 JavaScript 中實現(xiàn)拖放(上)  回復(fù)  更多評論
					  
				
    
				看到廣告可真夠煩的，不過摟主還是辛苦了，等待第三篇
				
    
					2006-10-13 18:16 | stoneshao
				
    
			
    
		
			
    
				
    
					# re: [翻譯] 如何在 JavaScript 中實現(xiàn)拖放(上)[未登錄]  回復(fù)  更多評論
					  
				
    
				0
				
    
					2009-02-17 17:08 | Nicole
				
    
			
    
		

    





    








    

				
			
    
		    		
	
    
	
    
		
			

		
	
    

    


    







    
        
	



主站蜘蛛池模板：
精品成人免费自拍视频|
国产精品偷伦视频免费观看了|
在线涩涩免费观看国产精品
|
三年片在线观看免费观看大全中国
|
毛片a级三毛片免费播放|
亚洲宅男天堂a在线|
亚洲成人免费在线观看|
亚洲最新中文字幕|
美女视频黄的全免费视频|
亚洲精品人成网在线播放影院|
好大好硬好爽免费视频|
亚洲av永久无码精品网址|
国产成人精品高清免费|
五级黄18以上免费看|
亚洲人成网7777777国产|
日韩免费人妻AV无码专区蜜桃|
亚洲欧洲日产韩国在线|
成年人性生活免费视频|
美女隐私免费视频看|
亚洲人成无码久久电影网站|
91精品成人免费国产|
无码乱人伦一区二区亚洲|
亚洲香蕉免费有线视频|
亚洲欧美日韩综合久久久久|
亚洲AV蜜桃永久无码精品|
18禁在线无遮挡免费观看网站|
亚洲视频一区在线观看|
国产成人免费高清激情视频|
美国毛片亚洲社区在线观看|
亚洲人成色7777在线观看|
91频在线观看免费大全|
精品久久久久久亚洲综合网|
亚洲真人无码永久在线|
91香蕉成人免费网站|
特级毛片全部免费播放a一级|
亚洲精品午夜国产VA久久成人|
国产成人精品免费午夜app|
美女视频黄a视频全免费网站一区
美女视频黄a视频全免费网站色
|
思思re热免费精品视频66|
免费又黄又爽又猛大片午夜|
亚洲天堂视频在线观看|