I'm facing a critical bug that's causing significant issues for me.
In my Vue project, I have developed a form generator component. It consists of a draggable area with user-friendly draggable items such as short answer, long answer, numeric answer, radio/checkbox answer, and more.
The drag-and-drop functionality allows me to place these items in a drop zone where they are then added to an object to create a preview of the form.
Everything seems to be working smoothly, except for one major issue... Occasionally, when I initiate a drag action and the dragstart event is triggered (I've confirmed this with console logs), the dragend event fires almost immediately even though I'm still holding down the mouse button.
This problem occurs randomly and doesn't seem related to any specific type of field being dragged from the draggable area. While there was a known Chrome bug related to this issue, it had supposedly been resolved (or so I believe).
I am currently using Chrome version: Version 78.0.3904.108 (Official Build) (64-bit), and I suspect similar issues may have occurred with previous versions.
Below, I'll provide some pseudo-code snippets to illustrate the implementation:
DraggableArea.vue
<template lang='pug'>
#draggable-area
ul
draggable-item(
v-for='draggableField in draggableFields'
:fieldInfoToBeDropped='draggableField.fieldInfoToBeDropped'
)
</template>
DraggableItem.vue
<template lang='pug'>
li(
draggable='true'
@dragstart.stop='handleDragstart'
@dragend.stop='handleDragend'
@drop.stop='handleDrop
</template>
export default {
...
methods: {
handleDragstart(e) {
const fieldInfoToBeDropped = this.fieldInfoToBeDropped // contains information for drop zone handling
console.log('DraggableItem, handleDragstart event:', e)
setTimeout(() => { this.$el.classList.add('drag') }, 10)
e.dataTransfer.clearData()
const fieldObjectStr = JSON.stringify(fieldInfoToBeDropped)
e.dataTransfer.setData('fieldObject', fieldObjectStr)
},
handleDragend(e) {
console.log('DraggableItem: dragend fires')
this.$el.classList.remove('drag')
e.dataTransfer.clearData()
},
handleDrop(e) {
this.handleDragend(e)
}
}
An example of fieldInfoToBeDropped structure:
{
componentType:"text",
name:"",
description:"",
iconName:"text",
id:"field_1575448385646rgzh6hhh6",
mandatory:true
}
I haven't tested the functionality in other browsers yet, but so far, the issue has only arisen in Chrome.
Thank you!