javascript - Dropzone 问题 - dropzone 内的某些点不起作用。将文件放在那里将在浏览器中打开它们

Question

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

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

我受到这个设计的启发：

https://www.youtube.com/watch?v=seXXWRygRkY
我只从该视频中获取了拖放区突出显示的想法。

如果您观看视频，您会看到在 0:15 他越过一个元素并且放置区闪烁。这发生在我在很多地方的放置区。

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

<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>

问题：

如果我将项目拖动到某些边框或文本上，则 dropzone 会从粉红色闪烁到默认颜色。如果我在放置区不是粉红色时放置文件，浏览器将打开所述文件。

这是一个说明问题的小提琴：http: //jsfiddle.net/m3wzbyoL/23/

您必须从您的操作系统中选择一个文件，将其拖到该区域上并将其移动到那里，您会看到疯狂的闪烁。

添加pointer-events: none;到.drop容器将取消子元素中的每个事件，我不希望这样。

如果我添加pointer-events: none;到.drop .highlight将使拖动事件不起作用。

标签： javascriptvue.js

Answer 1

两件事情：

1. 确保您仅在和事件上切换drag-ok课程。将每隔几百毫秒触发一次，仅用于在拖动时捕获事件。dragenterdragleavedragover

2. 当类处于活动状态时（而不是拖放区目标本身），禁用pointer-eventsCSS 中拖放区目标的所有子级。drag-ok这将确保在拖动时不会干扰来自孩子的其他事件。

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

$('.drop').on('dragenter', function(e) {
    $(this).addClass('drag-ok');
  })
  .on('dragleave', function(e) {
    $(this).removeClass('drag-ok');
  })

.drop {
  height: auto;
  width: 200px;
  background: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.drop.drag-ok {
  border: 2px dashed black;
  background: black;
  opacity: 0.5;
}

/**
 * The important bit:
 * disable pointer events on all children elements of
 * the drop zone element *only* when the dragenter
 * event has fired (.drag-ok is active)
 */
.drop.drag-ok * {
  pointer-events: none;
}

.img {
  height: 100px;
  width: 100px;
  background: red;
  margin: 5px 0;
}

.img:hover {
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div draggable="true">drag me</div>

<div class="drop">
  <span>Drop here</span>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>