關于前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件

iKcamp 發布于2019-08-26 10:31 / 604人閱讀

摘要：在中，拖放是標準的一部分，任何元素都能夠拖放。如果需要設置允許放置，我們必須阻止對元素的默認處理方式方法。

系列文章

關于前端上傳文件全面基礎掃盲貼(零)
關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest
關于前端上傳文件全面基礎掃盲貼(二) ----- File
關于前端上傳文件全面基礎掃盲貼(三) ----- FormData
關于前端上傳文件全面基礎掃盲貼(四) ----- FileReader
關于前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件
關于前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)

H5拖拽事件(知識點主要來源于HTML 5 拖放)

其實打算出實戰代碼的，想想好像可以插多一個拖曳掃盲貼，在PC上傳文件也經常能用到的，先來看看有關知識點。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。先看看兼容性如何

移動端全線飄紅我可以理解的，畢竟不是主要應用交互，

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

元素哦

。
里面的事件有

事件	描述
ondragstart	當拖拽元素開始被拖拽的時候觸發的事件，此事件作用在被拖曳元素上
ondragenter	當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上
ondragover	拖拽元素在目標元素上移動的時候觸發的事件，此事件作用在目標元素上（默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式 event.preventDefault() 方法。）
ondrop	被拖拽的元素在目標元素上同時鼠標放開觸發的事件，此事件作用在目標元素上
ondragend	當拖拽完成后觸發的事件，此事件作用在被拖曳元素上

方法有

方法	作用
setData	設置被拖元素的數據類型和值
getData	返回在 setData() 方法中設置為相同類型的任何數據

實例：

就講這么多了，接下來你們可以自己發揮想象做出好多好玩的東西了。

GPU云服務器云服務器服務器掃盲貼 php拖拽上傳大文件 h5 js 文件上傳 jquery拖拽事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106308.html

關于前端上傳文件全面基礎掃盲貼(二) ----- File

摘要：為了解救上面說到的問題是向提交的一個草案，旨在推出一套標準的，其基本功能是實現用對本地文件進行操作。出于安全性的考慮，該只對本地文件提供有限的訪問。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- For...

scola666 2019-08-26 10:31 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(零)

摘要：表單用于向服務器傳輸數據。屬性對象的屬性指定了一個事件句柄函數。標簽的屬性應當與相關元素的屬性相同。詳情查閱請狠狠地點擊關于對象代表表單中的一個提交按鈕在表單提交之前，觸發事件句柄，并且一個句柄可以通過返回來取消表單提交。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) -...

SnaiLiu 2019-08-02 15:42 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(四) ----- FileReader

摘要：沒有瀏覽器測試，所以不知道是不是有效，其實里面看起來比我寫的那個復雜，實際上多了個檢驗格式上兼容寫法所以不要怕，如果我錯了記得提醒下我啊。目前為止其實已經該說的都差不多覆蓋到了吧，動手能力強的話已經可以根據教程寫一個實例出來的了。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(...

Tony 2019-08-26 10:31 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(三) ----- FormData

摘要：如果是傳入三個參數的方式，那么該值將是一個布爾值，文件，或者一個，如果不是，將被轉成一個字符串可選傳給服務器的文件名稱一個。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----- FormData關于前端上傳文...

developerworks 2019-08-26 10:30 評論0 收藏0