Drag and Drop on v-textarea vuetify

Question

I'm trying to implement a simple Drag and Drop on vuetify v-textarea. I'm getting problem once I click the v-textarea, it removes the value from a dropped component. I don't even know if it's cause of my code or just isn't available on vuetify v-textarea features. I provide a snippet 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 get the value from dragged element
    *
    * @return void
    */
    drag(event){ event.dataTransfer.setData("text", event.target.value); },

    /*
    * To set the value from dragged element into an object 
    *
    * @return void
    */
    drop(event){ 
        event.target.value += event.dataTransfer.getData("text");
        this.setText(event.target.value);
    },
    
    /*
    * To prevent some actions when dropping value
    *
    * @return void
    */
    allowDrop(event){ event.preventDefault() },

Thanks in advance

Blackraspberryyy Blackraspberryyy · Accepted Answer · 2020-09-02T09:39:26

You forgot to update the _paragraph variable in drop() method.

drop(event){ 
  event.target.value += event.dataTransfer.getData("text");
  this.setText(event.target.value);
  this._paragraph = event.target.value; // update the value of _paragraph.
}

Here is a working demo.

Also, prefixing your paragraph variable with an underscore might give you an error since they are reserve for Vue's internal properties. However, you can still access it via $data._paragraph but I recommend to just remove the underscore completely. It's much cleaner.

Drag and Drop on v-textarea vuetify

1 Answers