2

我正在尝试在我自己制作的上传放置区内使用 Vue.draggable。

问题：

<draggable></draggable>是在里面dropzone，所以如果我开始从数组中拖动一个列表项，draggable它将触发dropzone拖放事件而不是draggable那些。此外，将文件从操作系统拖到<draggable></draggable>打开它们，它不会将它们添加到列表中。

仅当我将文件从操作系统拖到dropzone

Vue文件：

<template>
      <div
        @drop.prevent="drop"
        @dragover.prevent
        @dragenter.prevent="dragEnter"
        @dragleave.prevent="dragLeave"
        :class="`mid_container ${dragging ? 'dragging' : ''}`"
      >
        <div v-cloak class="file-manager">
          <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>

          <draggable
            class="file-manager draggable"
            v-model="currentFiles"
            ghost-class="ghost"
            @end="onEnd"
          >
            <transition-group
              class="file-manager transitionGroup"
              type="transition"
              name="flip-list"
            >
              <div
                :class="`sortable file-line ${file.status ? 'wrong-file' : ''}`"
                v-for="(file, index) in currentFiles"
                :key="file.name"
              >
                <!-- left  -->
                <div class="file-name">
                  {{ file.name }}
                  <span v-if="file.status">
                    <br />
                    {{ 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="deleteFile(index)">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </transition-group>
          </draggable>
          
        </div>
      </div>
</template>

<script>
methods: {
    dragEnter(event) {
      event.preventDefault();
      this.drag_counter++;
      this.dragging = true;
    },
    dragLeave(event) {
      event.preventDefault();
      this.drag_counter--;
      if (this.drag_counter === 0) this.dragging = false;
    },
    drop(event) {
      event.preventDefault();
      this.drag_counter = 0;
      this.dragging = false;
      this.sendFiles(event);
    },
}
</script>

有人可以指出我如何加入两者的正确方向吗？

4

0 回答 0