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)的位置，在它周圍有一個小（通常有2px）邊框，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非空的時候，我們需要進行拖動操作。

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

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

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


	


          
	    
    


          

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

          





          








          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
上林县|
平阳县|
华池县|
瑞昌市|
抚松县|
玉龙|
赤水市|
惠安县|
尼玛县|
安仁县|
会理县|
图片|
新巴尔虎右旗|
山阳县|
马公市|
桃园县|
湟源县|
清水河县|
宁波市|
白城市|
手游|
云林县|
牟定县|
民县|
中阳县|
盈江县|
芜湖市|
和林格尔县|
铁岭市|
镇巴县|
稷山县|
彭州市|
彰武县|
高唐县|
边坝县|
高陵县|
邢台县|
新巴尔虎右旗|
成都市|
定边县|
基隆市|