熱門服務分類

       
  
公司注冊服務
   
  
報稅記賬服務
   
  
資質代辦服務
   
  
許可證代辦服務
   
  
商標注冊服務
   
  
創業知識服務
   
 

    
    
  






  

    
九龍商務代辦主頁 > 網站建設 > 站長學院 > HTML5+CSS3 > HTML 5 拖放

    

  





  

    

		

		  

			

			  

			

			
		  

		 

  
  
	  
閱讀排行

	  

		
	  

  
  
  
  
	  
隨機文章

	  

		
    
		  
		

	  

  
  
      
 HTML 5 拖放_【九龍商務代辦】 

	  

		  

			

			  
聯系方式

			

			

				
【九龍商務代辦】

				
電話：18978939080

				
電話：13807817411

				
電話：13878807671

				
電話：0771-5537667

				
地址：民族大道49號民族宮B座2306號（新夢之島樓上）

			

		  

	  

	  

  

	  

			

			  
熱門標簽

			
			
        
        

	  

  

    

  

  

  

    

	
HTML 5 拖放

      
        
        
摘要：拖放（Drag 和 drop）是 HTML5 標準的組成部分。 拖放 拖放是一種常見的特性，即抓取對象以后拖到另一個位置。 在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。 瀏覽器支持...
        
		

      

          18978939080

立即咨詢

      

      

    

    
 
       
      


      
      
編輯:網絡　來源:網絡整理　發布日期:03-07　瀏覽量統計中... 
反饋錯誤

　　字體：細 小 中 大
    

    

        

			
           
			
拖放（Drag 和 drop）是 HTML5 標準的組成部分。





拖放


拖放是一種常見的特性，即抓取對象以后拖到另一個位置。



在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。





瀏覽器支持


Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。



注釋：在 Safari 5.1.2 中不支持拖放。





HTML5 拖放實例


下面的例子是一個簡單的拖放實例：


實例


<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>



親自試一試



它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。





設置元素為可拖放


首先，為了使元素可拖動，把 draggable 屬性設置為 true ：


<img draggable="true" />




拖動什么 - ondragstart 和 setData()


然后，規定當元素被拖動時，會發生什么。



在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。



dataTransfer.setData() 方法設置被拖數據的數據類型和值：



function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}



在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。





放到何處 - ondragover


ondragover 事件規定在何處放置被拖動的數據。



默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。



這要通過調用 ondragover 事件的 event.preventDefault() 方法：


event.preventDefault()




進行放置 - ondrop


當放置被拖數據時，會發生 drop 事件。



在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：



function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}


代碼解釋：



調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）


通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。


被拖數據是被拖元素的 id ("drag1")


把被拖元素追加到放置元素（目標元素）中

			
 查看更多相似文章
	
			

			

			
閱讀全文

			閱讀全文
			

        




  
    
            
		

			
  •  上一篇：html5如何及時更新緩存文件(js、css或圖片) 
    • 
			
  •  下一篇：什么是黃金比例，并如何應用到設計上？ 
    • 
		
    
        
    
    
    
	
    
  
    

	
    	  
      
      更多相關閱讀
    
		
      
      
	
      

  
    

	
    	  
      
     
    熱門文章
    
        
      
		   
        
    
      
    
      
     
    最新文章
    
        
      
    	  
	
      

  
    

    

    


  
    
    
    
      
     
		網站首頁 |
		公司注冊|
		報稅記賬|
		資料下載中心|
		增值業務|
		關于我們 |
		聯系方式
	  
    
      
    
    
    
  
    


    
  
      
    

    


    

    

    

    
 
    
  
     
	友情鏈接　　所有鏈接 | 申請加入　 　Xml地圖 | 網站地圖
  
    
  
    
    
  
    
 
    

    

    

  
    
  
    
    
    
      
    
        
      
    
      
     【九龍商務代辦】微信號
        
    官方微信公眾號
    
      
    
      
    
        
     24小時電話18978939080
          
    民族大道49號民族宮B座2306號（新夢之島樓上）
    
        
    
        
     工商注冊13807817411 
          
        
    
        
     其他業務13878807671 
          
        
    
        
    
      
    
    
    
    
    
    
    
      
    Copyright © 2002-2028 九龍商務代辦公司 版權所有 備案號：桂ICP備11002429號-2
    
    
    
  
    

    





    
  
    ?
    
  
    
    
    
    
    
    
    【九龍商務代辦】QQ
    
     QQ在線咨詢     
    
    
      
    客服咨詢
    
      
    【九龍商務代辦】QQ
    
      
    【九龍商務代辦】QQ
    
      
    【九龍商務代辦】QQ
    
      
    【九龍商務代辦】QQ
    
      
    咨詢熱線
    
      
    18978939080
    
      
    13807817411
    
      
    13878807671
    
	  
    0771-5537667
    
    
    
    
    
      
    
        
    
          
    微信掃一掃
    
            關注官方微信
    
          【九龍商務代辦】微信號
          
    
          
    
        
    
      
    
      
     
    
      
    
    
    
  
    

    
 



    
	
    
		
    反饋
    
	
    
		
    
			
    
				【九龍商務代辦】微信號掃描二維碼關注我為好友
    
			
    
				
    
				
    
				
    
				
    
			
    
		
    
	
    

    


 
 


 

 瀏覽: 

2017AV天堂无码一区|好吊视频欧美国产在线观看|国产福利精品导航网址|无码专区国产精品第一页