Update:
I found that the drop event would not be called everytime I dragged my entry over the div element with class dateTitle. Trying to figure out why.
Original
I am working on a Todo list to drag items to different lists. To do this, I am using the drop, dragstart, and dragend events. For the most part, this is working fine when I drag to other lists or the same list.
My issue is that when I drop an entry in the same list, sometimes it will not call the drop function which leads to only the dragend function being called. The way I have my app set up, I need the drop function to fire successfully every time to ensure everything is in order.
It happens mostly when I drag and drop really quick in the same list.
Gif
Console
List
<template>
<div @drop="onDrop()">
<div class="dateTitle">
{{ dayNumber }}
</div>
<!-- Items go here-->
<Entry v-for="entry in entries" @dragstart="dragStart()" @dragend="dragEnd()" />
</div>
</template>
<script>
export default {
components: {
Entry
},
data() {
return { entries = [entry1, entry2, entry3, ...etc], sameList: false }
},
methods: {
onDrop() {
// this needs to execute everytime!
console.log("DROP");
if (//if dropping in the same list dont continue) {
console.log("Same List");
this.sameList = true;
return
}
},
dragStart() {
// this executes without fail
console.log("================");
console.log("DRAG START");
},
dragEnd() {
// this executes without fail, except it doesnt work as appropriately if onDrop isnt called.
console.log("DRAG END");
if (this.sameList) return;
}
}
}
<script/>
