這篇文章主要講解了“如何實現(xiàn)html元素拖拽功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何實現(xiàn)html元素拖拽功能”吧！

公司主營業(yè)務(wù)：做網(wǎng)站、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出江蘇免費做網(wǎng)站回饋大家。

1.創(chuàng)建拖拽對象
我們可以通過draggable屬性告訴瀏覽器，哪些元素需要實現(xiàn)拖拽功能。draggable有三個值：true：元素可以被拖拽；false：元素不能被拖拽；auto：瀏覽器自己判斷元素是否能被拖拽。
系統(tǒng)默認值是auto，但auto情況下瀏覽器對不同元素拖拽功能的支持是不一樣，如：支持img對象，不支持div對象。所以，如果需要拖拽一個元素，最好還是把draggale設(shè)置為true。下面我們看一個例子：

代碼如下:

drop here

運行效果：

2.處理拖拽事件
現(xiàn)在我們來了解拖拽相關(guān)的事件，有兩種類型的事件，一種是拖拽對象的事件，一種是投放區(qū)的事件。拖拽事件包括：dragstart：當(dāng)元素拖拽開始觸發(fā)；drag：在元素拖拽過程中觸發(fā)；dragend：元素拖拽結(jié)束時觸發(fā)。下面我們就看一個例子：

代碼如下:

drop here

運行效果：

3.創(chuàng)建投放區(qū)
我們來看投放區(qū)相關(guān)的事件：dragenter：當(dāng)拖拽對象進入投放區(qū)時觸發(fā)；dragover：拖拽對象在投放區(qū)內(nèi)移動時觸發(fā)；dragleave：拖拽對象沒有投放到投放區(qū)，離開投放區(qū)的時候觸發(fā)；drop：拖拽對象投放在投放區(qū)時觸發(fā)。
我們來看一個例子：

代碼如下:

drop here

運行結(jié)果：

4.使用DataTransfer
我們使用DataTransfer從拖拽對象向投放區(qū)傳遞數(shù)據(jù)。DataTransfer有下面的屬性和方法：types：返回數(shù)據(jù)的格式；getData()：返回指定格式數(shù)據(jù)；setData(, )：設(shè)置指定格式數(shù)據(jù)；clearData()：移除指定格式數(shù)據(jù)；files：返回已經(jīng)投放的文件數(shù)組。 
我們來看下面的例子，他實現(xiàn)的效果和例3一樣：

代碼如下:

drop here

5.拖拽文件
html5支持file api，可以讓我們操作本地文件。一般我們不直接使用file api，我們可以結(jié)合其他特性一起使用，比如結(jié)合拖拽特效，如下例：

代碼如下:

DataTransfer返回FileList對象，我們可以把他當(dāng)做file數(shù)組對象，file包含下面屬性：name：文件名字；type：文件類型（MIME類型）；size：文件大小。
運行效果：

6.上傳文件
下面介紹一個通過拖拽ajax上傳文件的實例。

代碼如下:

效果：

上面的一些例子不同瀏覽器運行效果可能不同，我用的是chrome瀏覽器，除了例5和6不支持多文件外，其他例子運行正常。大家可以下載demo。
demo下載地址：Html5Guide.draggable.rar

感謝各位的閱讀，以上就是“如何實現(xiàn)html元素拖拽功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何實現(xiàn)html元素拖拽功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！