前端如何实现拖拽效果（一）

本文使用的框架是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)
*/