Electron的使用笔记之禁用拖拽事件

Electron软件安装后如果用户拖拽文件或者图片到软件里面，会打开此文件，但是不能够关闭，因此导致体验不佳。

因此可以禁用全局的拖拽事件来阻止这个行为。

一、在util文件夹里面新建一个文件。

export default {
  mounted() {
    this.disableDragEvent();
  },
  methods: {
    disableDragEvent() {
      // 当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。
      window.addEventListener('dragenter', this.disableDrag);
      // 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。
      window.addEventListener('dragover', this.disableDrag);
      // 当在有效放置目标上放置元素或选择文本时触发此事件。
      window.addEventListener('drop', this.disableDrag);
    },
    //目前版本暂无使用可拖拽的上传区
    disableDrag(e) {
      // const dropzone = document.getElementById('upload-area') // 这个是可拖拽的上传区
      // if (dropzone === null || !dropzone.contains(e.target)) {
      e.preventDefault();
      //属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。
      // move操作用于指定被拖动的数据将被移动。 link操作用于指示将在源和放置位置之间创建某种形式的关系或连接。
      e.dataTransfer.effectAllowed = 'none';
      // 属性控制在拖放操作中给用户的反馈（通常是视觉上的）。它会影响在拖拽过程中光标的手势。
      e.dataTransfer.dropEffect = 'none';
    },
  },
  beforeDestroy() {
    window.removeEventListener('dragenter', this.disableDrag);
    window.removeEventListener('dragover', this.disableDrag);
    window.removeEventListener('drop', this.disableDrag);
  },
};

dataTransfer.dropEffect

dropEffect属性控制在拖放操作中显示的鼠标图标。dropEffect需要配合effectAllowed一起使用。

copy：

move：

link:

none：

dataTransfer.effectAllowed

dataTransfer.effectAllowed属性指定拖放操作所允许的一个效果。

copy：操作用于指示被拖动的数据将从当前位置复制到放置位置。

move：操作用于指定被拖动的数据将被移动。

link：操作用于指示将在源和放置位置之间创建某种形式的关系或连接。

二、新建的文件通过vue混入（mixin）的形式混入到app.vue中即可。