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