Menedżer plików = kontener HTML, który zawiera listę podobną do tabeli plików.

Zrobiłem strefę spadkową tak dużą jak menedżer plików zamiast wyznaczonej strefy rozwijanej.

Zainspirowałem ten projekt:

https://www.youtube.com/watch?v=SexxWrygrky
. Wziąłem tylko wyróżnienie z tego filmu tylko pomysł.

Przykład strefy Drop-Zone Jeśli oglądasz wideo, zobaczysz, że o 0:15 przechodzi przez element, a strefa rozwijania miga. Dzieje się tak z moją strefą upuść w wielu miejscach.

Mój obecny menedżer plików z hierarchią 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>

Kwestia:

Jeśli przeciągnę przedmioty na niektóre granice lub tekst, w którym Dropzone miga z różowego do koloru domyślnego. Jeśli upuścię pliki, gdy DrapZone nie jest różowy, przeglądarka otworzy wspomniany plik.

Oto skrzypce, aby zilustrować problem: http://jsfiddle.net/m3wzbyol/23/

Będziesz musiał wybrać plik z systemu operacyjnego, przeciągnij go na teren i przenieś go tam, a zobaczysz szalone mignięcia.

Dodawanie pointer-events: none; do kontenera .drop anuluje każde zdarzenie z elementu podrzędnego i nie chcę tego.

Jeśli dodam pointer-events: none; do .drop .highlight spowoduje, że zdarzenia przeciągania nie działają.

1
Jorje12 29 lipiec 2020, 14:56

1 odpowiedź

Najlepsza odpowiedź

Dwie rzeczy:

  1. Upewnij się, że przełączasz tylko klasę drag-ok na imprezach dragenter i dragleave. dragover Will Ogień co najmniej sto milisekund i jest tylko do przechwytywania zdarzeń , jak ciągniesz .

  2. Wyłącz pointer-events na wszystkich dzieciach docelowego strefy rozwijanej w CSS, gdy aktywna jest klasa drag-ok (nie sam cel spadku). Zapewni to, że żadne inne wydarzenia z dzieci będą przeszkadzać podczas przeciągania.

Uwaga: Kod dostarczony jako minimalny przykład, nie pasuje do danego kodu dokładnie ..

$('.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 lipiec 2020, 16:29