禁用默认行为

案例1

要实现元素上面的拖拽行为，首先要禁止整个DOM的默认拖拽行为，

  /**
   * 页面禁用拖拽上传时 浏览器默认打开图片
   */
  document.addEventListener('drop', function (e) {
    e.preventDefault()
  }, false)

  document.addEventListener('dragover', function (e) {
    e.preventDefault()
  }, false)

• js

// 获取指定的元素 
const drag = document.getElementById("drag");
if (drag) {
  console.log(1);
  drag.addEventListener("drop", e => {
    e.preventDefault(); //阻止e的默认行为
    console.log("e: ", e);

    if (!e.dataTransfer) return;

    const files = e.dataTransfer.files;
    if (files && files.length >= 1) {
      const path = files[0].path;
      console.log("file:", path);
    }
  });

  drag.addEventListener("dragover", e => {
    e.preventDefault();
  });
}

案例2 （vue）

  mounted() {
    var tranlatePath = document.getElementById("tranlate-path");
    tranlatePath.addEventListener("dragenter", this.onDrag, false);
    tranlatePath.addEventListener("dragover", this.onDrag, false);
    tranlatePath.addEventListener("drop", this.onDrop, false);
  },
  methods: {
    uploadFile: function (file) {
      console.log(file);
    },
    onDrag: function (e) {
      this.ifDrop = true;
 
      // 防抖（在拖拽区域时由于dragover会不停触发，导致防抖启动，不会执行，只有在拖拽离开后dragover停止100ms后执行代码块）
      if (this.timeout !== null) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.ifDrop = false;
        this.timeout = null;
        console.log(this.ifDrop);
      }, 100);
      
      e.stopPropagation();
      e.preventDefault();
    },
    onDrop: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.dataTransfer;
      for (var i = 0; i !== dt.files.length; i++) {
        this.uploadFile(dt.files[i]);
      }
    },
  },

案例3 （vueUse）

<template>
    <section class="ImageReader__container" ref="dropZoneRef"></section>
</template>
<script setup lang="ts">
import { useDropZone } from "@vueuse/core";

    
function onDrop(files: File[] | null) {
    if(isOverDropZone){ ../ }
}
    
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop);
</script>