Struggling to incorporate a Drag and Drop feature on vuetify v-textarea. Encountering an issue where clicking on the v-textarea results in the value from a dropped component being removed. Unsure if it's a flaw in my code or a limitation in vuetify v-textarea's functionality. A snippet of the code is provided below;
TEMPLATE
<v-textarea outlined dense @drop="drop($event)" @dragover="allowDrop($event)" placeholder="Paragraph" v-model="_paragraph"/>
<v-btn outlined dense color="#0057AD" draggable="true" @dragstart="drag($event)" :value="'{{date}}'">Date</v-btn>
SCRIPT
/*
* To capture the value from the dragged element
*
* @return void
*/
drag(event){ event.dataTransfer.setData("text", event.target.value); },
/*
* To transfer the value from the dragged element into an object
*
* @return void
*/
drop(event){
event.target.value += event.dataTransfer.getData("text");
this.setText(event.target.value);
},
/*
* To prevent certain actions when dropping a value
*
* @return void
*/
allowDrop(event){ event.preventDefault() },
Appreciate any help in advance