前端如何實現拖拽效果（一）

本文使用的框架是vue3

在日常項目的開發中，會遇到從瀏覽器外拖拽圖片上傳或者拖拽圖片交換位置的需求

從瀏覽器外拖拽圖片上傳

首先我們需要開辟一塊需要拖拽上傳圖片的區域

<template>
  <div class="targetArea" @drop="dropImg" @dragover="dragover" ref="dropTarget">
    <div v-if="hasImg">拖拽圖片上傳</div>
  </div>
</template>

編寫拖拽的方法

dragover(e){
 e.preventDefault();
},

dropImg(e){
  e.preventDefault();
  let file = e.dataTransfer.files[0];
  let target = this.$refs.dropTarget
  this.loadImg(file,target)
},

loadImg(file,target){
  const reader = new FileReader();
  const that = this
  reader.onload = (e) => {
   const tagChild = target.getElementsByTagName("img")[0]
   if(tagChild){
     target.removeChild(tagChild);
   }
   const img = document.createElement("img");
   img.style.width = "100%"
   img.style.height = "100%"
   img.src = e.target.result;
   target.append(img)
   that.hasImg = false
 }
    reader.readAsDataURL(file)
 }

注：e.preventDefault()是為了阻止瀏覽器的默認行為防止跳轉頁面等行為

這里有三個事件/方法

dragover

當圖片文件拖到對應框內時，鼠標停留執行的事件。

drop

拖拽到對應框內鼠標松開后會執行的事件
通過e.dataTransfer.files[0]獲取圖片的信息，圖片的格式繼承自blob格式，所以可以通過new FileReader()解析圖片最終創建img標簽傳入到頁面上

loadImg

渲染圖片方法
通過new FileReader()讀取圖片信息，readAsDataURL()方法可以將圖片信息讀取成一個url以便於傳入img標簽的src中。
如果需要上傳到后端的話可以用如下方法:

const file = e.dataTransfer.files[0];
const formData = new FormData();
formData.append("file", file);
/* 
最后將整個formData作為參數上傳上去即可。
例如：this.$axios.post("/upload", formData)
*/