小編給大家分享一下html5如何實現(xiàn)拖放功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為梁河等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及梁河網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、做網(wǎng)站、梁河網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

html5的拖放

1)創(chuàng)建來源項目

 1.1)draggable屬性的值：

     true——此元素能被拖動；

     false——此元素不能被拖動；

     auto——瀏覽器能夠自主決定某個元素能否被拖動；

 1.2）被拖動元素的事件：

     dragstart——在元素開始被拖動時觸發(fā)；

     drag——在元素被拖動時重復(fù)觸發(fā)。

     dragend——在拖動操作完畢時觸發(fā)；

2）創(chuàng)建釋放區(qū)

  2.1）釋放區(qū)事件：

       dragenter——當(dāng)被拖動元素進(jìn)入釋放區(qū)所占領(lǐng)的屏幕空間時觸發(fā)；

       dragover——當(dāng)被拖動元素在釋放區(qū)內(nèi)觸發(fā)時移動觸發(fā)；

       dragleave——當(dāng)被拖動元素沒有放入就離開釋放區(qū)時觸發(fā)；

       drop——當(dāng)被拖動元素在釋放區(qū)放下時觸發(fā)。

    
        
        
    
    
        
            
            
            
            
                Drop Here

            
            
        
            
    
        
    

3)使用DataTransfer對象

 3.1)與拖放操作所觸發(fā)的事件同一時候派發(fā)的對象是DragEvent，它派生于MouseEvent。

 DragEvent對象定義的額外屬性：

 dataTransfer——返回用于數(shù)據(jù)傳輸?shù)结尫艆^(qū)的對象（DataTransfer）；

 3.2)DataTransfer對象定義的屬性：

 types——返回數(shù)據(jù)的格式。

 getData()——返回指定格式的數(shù)據(jù)；

 setData(,)——設(shè)置指定格式的數(shù)據(jù)。

 clearData()——移除指定格式的數(shù)據(jù)。

 files——返回已被拖動文件的列表。  

    
        
        
    
    
        
            
            
            
            
                Drop Here

            
            
        
            
    
        
    

3.3）拖放文件：

   File對象定義的屬性

   name——獲取文件名稱。

   type——獲取文件類型。以MIME類型表示；

   size——獲取文件大小（以字節(jié)計算）；

    
        
        
    
    
        
            
                
                    Bananas:

                    

                

                
                    Apples:

                    

                

                
                    Cherries:

                    

                

                
                    File:

                    

                

                
                    Total:

                    0 items

                
                
            

            
                Drop Files Here

            
            
            Submit Form
        
        
    

以上是“html5如何實現(xiàn)拖放功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：html5如何實現(xiàn)拖放功能-創(chuàng)新互聯(lián)
本文來源：http://www.weahome.cn/article/pihhs.html