Administrador de archivos = contenedor html que contiene una lista de archivos en forma de tabla.

He creado una zona de colocación tan grande como el administrador de archivos en lugar de hacer una zona de colocación designada.

Me inspiré en este diseño:

https://www.youtube.com/watch?v=seXXWRygRkY
Solo tomé la idea de resaltar la zona de caída de este video.

ejemplo de zona de caída Si miras el video, verás que a las 0:15 pasa sobre un elemento y la zona de caída parpadea. Esto sucede con mi zona de entrega en MUCHOS lugares.

Mi administrador de archivos actual con jerarquía div:

Current file manager

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

Problema:

Si arrastro elementos sobre algunos bordes o texto, la zona de colocación parpadea de rosa al color predeterminado. Si suelto archivos cuando la zona de entrega no es rosa, el navegador abrirá dicho archivo.

Aquí hay un violín para ilustrar el problema: http://jsfiddle.net/m3wzbyoL/23/

Tendrá que seleccionar un archivo de su sistema operativo, arrastrarlo sobre el área y moverlo por allí y verá destellos locos.

Agregar pointer-events: none; al contenedor .drop cancelará todos los eventos del elemento secundario y no quiero esto.

Si agrego pointer-events: none; a .drop .highlight, los eventos de arrastre no funcionarán.

1
Jorje12 29 jul. 2020 a las 14:56

1 respuesta

La mejor respuesta

Dos cosas:

  1. Asegúrese de que solo está alternando la clase drag-ok en los eventos dragenter y dragleave. dragover disparará cada pocos cientos de milisegundos y solo para capturar eventos mientras los arrastra .

  2. Deshabilite pointer-events en todos los elementos secundarios del destino de la zona de colocación en CSS cuando la clase drag-ok esté activa (no el destino de la zona de colocación en sí). Esto asegurará que ningún otro evento de los niños interfiera mientras arrastra.

Nota: el código proporcionado como un ejemplo mínimo, no coincide exactamente con el código en cuestión ..

$('.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>
1
chazsolo 29 jul. 2020 a las 16:29