資訊專欄INFORMATION COLUMN
摘要：在中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式方法。
系列文章
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(四) ----- FileReader
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(五) ----- H5拖拽事件
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(六) ----- 圖片上傳,旋轉(zhuǎn),重繪,預(yù)覽等實戰(zhàn)(附DEMO)
其實打算出實戰(zhàn)代碼的，想想好像可以插多一個拖曳掃盲貼，在PC上傳文件也經(jīng)常能用到的，先來看看有關(guān)知識點。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。先看看兼容性如何
移動端全線飄紅我可以理解的，畢竟不是主要應(yīng)用交互，
首先，為了使元素可拖動，把 draggable 屬性設(shè)置為 true ：
元素哦
。| 事件 | 描述 |
|---|---|
| ondragstart | 當(dāng)拖拽元素開始被拖拽的時候觸發(fā)的事件，此事件作用在被拖曳元素上 |
| ondragenter | 當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時候觸發(fā)的事件，此事件作用在目標(biāo)元素上 |
| ondragover | 拖拽元素在目標(biāo)元素上移動的時候觸發(fā)的事件，此事件作用在目標(biāo)元素上（默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式 event.preventDefault() 方法。） |
| ondrop | 被拖拽的元素在目標(biāo)元素上同時鼠標(biāo)放開觸發(fā)的事件，此事件作用在目標(biāo)元素上 |
| ondragend | 當(dāng)拖拽完成后觸發(fā)的事件，此事件作用在被拖曳元素上 |
方法有
| 方法 | 作用 |
|---|---|
| setData | 設(shè)置被拖元素的數(shù)據(jù)類型和值 |
| getData | 返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù) |
實例：
就講這么多了，接下來你們可以自己發(fā)揮想象做出好多好玩的東西了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/106308.html
摘要：為了解救上面說到的問題是向提交的一個草案，旨在推出一套標(biāo)準(zhǔn)的，其基本功能是實現(xiàn)用對本地文件進(jìn)行操作。出于安全性的考慮，該只對本地文件提供有限的訪問。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- For...
摘要：表單用于向服務(wù)器傳輸數(shù)據(jù)。屬性對象的屬性指定了一個事件句柄函數(shù)。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。詳情查閱請狠狠地點擊關(guān)于對象代表表單中的一個提交按鈕在表單提交之前，觸發(fā)事件句柄，并且一個句柄可以通過返回來取消表單提交。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) -...
摘要：沒有瀏覽器測試，所以不知道是不是有效，其實里面看起來比我寫的那個復(fù)雜，實際上多了個檢驗格式上兼容寫法所以不要怕，如果我錯了記得提醒下我啊。目前為止其實已經(jīng)該說的都差不多覆蓋到了吧，動手能力強的話已經(jīng)可以根據(jù)教程寫一個實例出來的了。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(...
摘要：如果是傳入三個參數(shù)的方式，那么該值將是一個布爾值，文件，或者一個，如果不是，將被轉(zhuǎn)成一個字符串可選傳給服務(wù)器的文件名稱一個。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData關(guān)于前端上傳文...
閱讀 1152·2023-04-26 02:49
閱讀 1318·2021-11-25 09:43
閱讀 2707·2021-11-18 10:02
閱讀 3063·2021-10-18 13:32
閱讀 1418·2019-08-30 13:54
閱讀 2219·2019-08-30 12:58
閱讀 3170·2019-08-29 14:06
閱讀 2288·2019-08-28 18:10
