HTML 拖放（Drag and Drop）接口使應(yīng)用程序能夠在Firefox和其他瀏覽器中使用拖放功能驻呐。例如陈症，通過(guò)這些功能功咒，用戶可以使用鼠標(biāo)選擇可拖動(dòng)元素，將元素拖動(dòng)到可放置元素，并通過(guò)釋放鼠標(biāo)按鈕來(lái)放置這些元素紊搪。可拖動(dòng)元素的一個(gè)半透明表示在拖動(dòng)操作期間跟隨鼠標(biāo)指針。對(duì)于網(wǎng)站拱绑、擴(kuò)展以及 XUL 應(yīng)用程序來(lái)說(shuō)，你可以自定義能夠成為可拖拽的元素類(lèi)型丽蝎、可拖拽元素產(chǎn)生的反饋類(lèi)型猎拨，以及可放置的元素。
看到這個(gè)圖片之后是不是有一種豁然開(kāi)朗的感覺(jué)屠阻？我們要想實(shí)現(xiàn)一個(gè)簡(jiǎn)單的拖拽文件上傳红省，只需要4個(gè)屬性 drop、dragleave国觉、dragenter吧恃、dragover;
話不多說(shuō)，直接上代碼蛉加；
html結(jié)構(gòu)
<div class="updata-body" @dragenter="dragenter($event)">
<div @drop="enentDrop($event)" @dragleave="dragleave($event)" @dragover="dragover($event)">
<div class="drag-box">{{drapText}}</div>
</div>
<ul>
<li v-for="(item, index) in fileData" :key="index">{{item.name}}</li>
</ul>
</div>
<script>
export default {
name: 'drag',
data() {
return {
drapText: '將文件拖拽到此處進(jìn)行上傳',
fileData: []
}
}
}
</script>
接下來(lái)就是方法和思路
第一步 dragenter() 是當(dāng)選中的文件移入到拖拽的區(qū)域會(huì)觸發(fā)此方法
第二步 dragover() 是在拖拽的區(qū)域不斷的移動(dòng)會(huì)觸發(fā)此方法
第三步 enentDrop() 鼠標(biāo)在拖拽的區(qū)域松開(kāi)鼠標(biāo)蚜枢，釋放拖拽的問(wèn)題會(huì)觸發(fā)此方法
第四步 dragleave() 是拖拽的文件離開(kāi)拖拽的區(qū)域會(huì)觸發(fā)此方法
methods: {
enentDrop: function(e) {
e.stopPropagation();
e.preventDefault();
this.updataFun(e.dataTransfer.files)
},
dragleave(e) {
e.stopPropagation();
e.preventDefault();
},
dragenter(e) {
e.stopPropagation();
e.preventDefault();
this.drapText = '松開(kāi)鼠標(biāo)完成上傳';
},
dragover(e) {
e.stopPropagation();
e.preventDefault();
},
updataFun(data) {
let that = this;
for (let i = 0; i < data.length; i++) {
this.fileData.push(data[i])
}
this.drapText = '上傳成功';
setTimeout(() => {
that.drapText = '將文件拖拽到此處進(jìn)行上傳';
}, 500);
}
}
方法里需要注意的一些問(wèn)題；1. 一定要阻止默認(rèn)事件和阻止冒泡事件针饥，不然就會(huì)發(fā)生你把文件拖入到瀏覽器中會(huì)自動(dòng)下載厂抽，如果是圖片的話就會(huì)默認(rèn)展示到瀏覽器中；
2. 在拖拽釋放之后想要獲取上傳的文件信息e.dataTransfer.files
https://github.com/xiangnideye/vue-select 這個(gè)是github地址丁眼，有需要可以去拉去代碼筷凤。如果喜歡可以給個(gè)星星，謝謝～
