Javascript Dropzone问题-Dropzone中存在无法工作的点。在那个里放置文件将在浏览器中打开它们

文件管理器=包含类似表格的文件列表的html容器。

我创建了一个与文件管理器一样大的放置区域，而不是指定的放置区域

我从这个设计中得到了灵感：
我只是从这个视频中选择了下降区的亮点

如果你观看视频，你会看到在0:15，他经过一个元素，下降区闪烁。我在很多地方的降落区都会发生这种情况。

我当前的具有div层次结构的文件管理器：

文件
经理
文件名：
尺寸：
行动：
{{file.name}
-{{file.status}
{{file.size}}kb
{{message}}
.拖行{
背景：粉红色；
不透明度：0.5；
z指数：100；
}

问题: 如果我将项目拖动到某些边框或文本上，dropzone将从粉红色闪烁为默认颜色。如果我在dropzone不是粉红色时删除文件，浏览器将打开该文件

这里有一把小提琴来说明这个问题：

你必须从你的操作系统中选择一个文件，把它拖过这个区域，然后在那里移动，你会看到疯狂的闪光

添加

指针事件：无

到

。drop

容器将取消子元素中的每个事件，我不希望这样

如果我添加

指针事件：无到
。拖放。高亮显示将使拖动事件不起作用。
两件事：

确保仅在
dragenter
和
dragleave
事件上切换
drag ok
类<代码>dragover
将


当
拖动ok
类处于活动状态时（不是拖放区域目标本身），在CSS中的拖放区域目标的所有子级上禁用
指针事件。这将确保拖动时不会有来自子对象的其他事件干扰


注意：作为一个最小示例提供的代码与有问题的代码不完全匹配


$（'.drop'）。在（'dragenter'，函数（e）上{
$（this.addClass（'drag-ok'）；
})
.on（'dragleave'，函数（e）{
$（this.removeClass（'drag-ok'）；
})
.drop{
高度：自动；
宽度：200px；
背景：#aaa；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.drop.drag-ok{
边框：2个黑色虚线；
背景：黑色；
不透明度：0.5；
}
/**
*重要的一点是：
*在的所有子元素上禁用指针事件
*dragenter启动时，DropZone元素*仅*
*事件已触发（.drag ok处于活动状态）
*/
.drop.drag-ok*{
指针事件：无；
}
.img{
高度：100px；
宽度：100px；
背景：红色；
保证金：5px0；
}
.img:悬停{
背景：粉红色；
}

拖我
到这里来
这是否回答了您的问题您可能只需要在启用拖动时执行此操作：
.drag ok*{pointer events:none；}
@chazsolo
.drag ok*{pointer events:none；}
不起作用，但
.mid_容器{pointer events:none；}
在一定程度上起作用。我在
mid_容器中有一些悬停元素，在我设置
指针事件后停止触发：无嗯，您通常不想禁用指针事件，只能在拖动时禁用。@chazsolo当然不想。但是设置
.drag ok*{pointer events:none；}
会使闪烁更糟糕。您是否有可能在问题中创建一个可复制的示例作为片段？将更容易帮助您调试
<template>
  <section
    @dragover.prevent="dragOk = true"
    @drop.prevent="addFile"
    @drop.stop.prevent="dragOk = false"
    @dragleave="dragOk = false"
  >
    <div class="top_container">
      <div :class="`mid_container ${dragOk ? 'drag-ok' : ''}`">
        <div class="title">
          <h1>
            File
            <span>Manager</span>
          </h1>
        </div>
        <!-- TODO: File Manager Component -->
        <div v-cloak class="file-manager-container">
          <div class="file-line header">
            <div class="file-name">File name:</div>
            <div class="file-size">Size:</div>
            <div class="action-buttons">Actions:</div>
          </div>
          <div
            :class="`file-line ${file.status ? 'wrong-file' : ''}`"
            v-for="(file, index) in currentFiles"
            :key="index"
          >
            <!-- left  -->
            <div class="file-name">
              {{ file.name }}
              <span v-if="file.status">&nbsp;- {{ file.status }}</span>
            </div>
            <!-- middle  -->
            <div class="file-size">{{ file.size }} kb</div>
            <!-- right -->
            <div class="action-buttons">
              <span>
                <i class="far fa-edit"></i>
              </span>
              <span @click.prevent="currentFiles.splice(index, 1)">
                <i class="fa fa-trash" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>
        <!-- <span v-if="uploading" class="progress-bar">
              <progress :value="progress" max="100">{{progress}}%</progress>
        </span>-->

        <div class="upload-message" v-if="message">
          <div>{{ message }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.drag-ok {
  background: pink;
  opacity: 0.5;
  z-index: 100;
}
</style>