在另一个拖动容器中定义一个拖动容器

Question

这与使用vue实现drag and drop有关。我有一个draggable div容器。

// BoardColumn Component Parent Container
<template>
  <div
    draggable
    @dragover.prevent
    @dragenter.prevent
    @drop="dropColumn($event, columnIndex)"
    @dragstart="setPickColumnInfo($event, columnIndex)"
  >
    <div class="column bg-grey-light m-4">
      <div class="flex items-center mb-2 font-bold">
        {{ getColumnName() }}
      </div>
      <div class="list-reset">
        <TaskCard
          class="task"
          v-for="(task, $taskIndex) of columnData.tasks"
          :key="$taskIndex"
          v-bind:task="task"
          v-bind:taskIndex="$taskIndex"
          v-bind:columnIndex="columnIndex"
        />
      </div>
      <input
        type="text"
        class="block p-2 w-full bg-transparent"
        placeholder="+Enter a new task"
        @keyup.enter="createTask($event, columnData.tasks)"
      />
    </div>
  </div>
</template>

此容器内部是另一个可拖动的容器TaskCard。我能够拖动父容器和子容器而没有任何问题。但是，无论拖动哪个容器，仅与父容器BoardColumn相关的回调函数都会被触发。

功能定义如下。任何帮助将不胜感激。

// TaskCard.vue Child container
<template>
  <div
    draggable
    @dragover.prevent
    @dragenter.prevent
    @dragstart="setPickupTaskInfo($event, taskIndex, columnIndex)"
    @dragend="dropTask($event, taskIndex, columnIndex)"
    @click="goToTask(task)"
    v-if="isTaskOpen === false"
  >
    <span class="w-full flex-no-shrink font-bold">
      {{ task.name }}
    </span>
    <p v-if="task.description" class="w-full flex-no-shrink mt-1 text-sm">
      {{ task.description }}
    </p>
  </div>
  <div class="task-bg" @click.self="close" v-else>
    <router-view />
  </div>
</template>

// BoardColumn JS
import TaskCard from "@/components/TaskCard/TaskCard.vue";

export default {
  components: {
    TaskCard
  },
  props: ["columnData", "columnIndex"],
  methods: {
    getColumnName() {
      return this.columnData.name;
    },
    createTask(e, tasks) {
      this.$store.commit("CREATE_TASK", {
        tasks,
        name: e.target.value
      });
      e.target.value = "";
    },
    setPickColumnInfo(e, fromColumnIndex) {
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.dropEffect = "move";
      e.dataTransfer.setData("from-column-index", fromColumnIndex);
      e.dataTransfer.setData("type", "column");
    },
    moveColumn(fromColumnIndex, toColumnIndex) {
      this.$store.commit("MOVE_COLUMN", {
        fromColumnIndex,
        toColumnIndex
      });
    },
    dropColumn(e, toColumnIndex) {
      if (e.dataTransfer.getData("type") === "column") {
        this.moveColumn(
          e.dataTransfer.getData("from-column-index"),
          toColumnIndex
        );
        console.log(e.dataTransfer.getData("type"));
      }
    }
  }
};

// TaskCard JS
export default {
  props: ["task", "taskIndex", "columnIndex"],
  data() {
    return {
      isTaskOpen: false
    };
  },
  methods: {
    goToTask(task) {
      this.$router.push({ name: "task", params: { id: task.id } });
      this.isTaskOpen = true;
    },
    close() {
      this.$router.push({ name: "board" });
      this.isTaskOpen = false;
    },
    setPickupTaskInfo(e, fromTaskIndex, fromColumnIndex) {
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.dropEffect = "move";
      e.dataTransfer.setData("from-task-index", fromTaskIndex);
      e.dataTransfer.setData("from-column-index", fromColumnIndex);
      e.dataTransfer.setData("type", "task");
      console.log(e);
    },
    moveTask(e, toTaskIndex, toColumnIndex) {
      const fromColumnIndex = e.dataTransfer.getData("from-column-index");
      const fromTaskIndex = e.dataTransfer.getData("from-task-index");

      this.$store.commit("MOVE_TASK", {
        fromTaskIndex,
        fromColumnIndex,
        toTaskIndex,
        toColumnIndex
      });
    },
    dropTask(e, toTaskIndex, toColumnIndex) {
      if (e.dataTransfer.getData("type") === "task") {
        console.log(e.dataTransfer.getData("type"));
        this.moveTask(e, toTaskIndex, toColumnIndex);
      }
    }
  }
};