Defining a drag container inside another drag container

问题

This is in relation to implementing drag and drop using vue. I have a draggable div container.

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

Inside this container is another draggable container TaskCard. i'm able to drag the parent container and the child container without any issues. However, the callback functions related to only parent container BoardColumn gets fired regardless of which container is being dragged.

The function definitions are below. Any help would be greatly appreciated.

// 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);
      }
    }
  }
};

来源：https://stackoverflow.com/questions/57409883/defining-a-drag-container-inside-another-drag-container