CODEWITHSUNDEEP
javascriptvue.jsdrag-and-dropvuetify.js
Milano
Milano

Reputation: 18745

Vuetify - drag value from chip and drop to input doesn't work

I have a couple of v-chip elements and a form. I'm trying to allow users to drag any chip and drop it anywhere in the form so the form input will have the chip value.

This is what I've done so far (simplified):

 <v-chip :draggable="true" @dragstart="draggedData='First Chip'">First Chip</v-chip>
 <v-text-field label="Droppable" v-model="input" @drop="input=draggedData"></v-text-field>

When the chip is dragged, it's value is stored in draggedData. After it's "dropped" to some input, the input should have the draggedData value but it doesn't happen.

Do you know what to do? Dragging works - dropping doesn't

Upvotes: 0

Views: 972

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

There is a need to use prevent default in ondragover event to stop blocking one element to drop to another element.

Way 01:

<v-text-field
  label="Droppable"
  placeholder="Droppable"
  v-model="input"
  @drop="onDrop"
  @dragover.prevent
></v-text-field>

Way 02:

<v-text-field
  label="Droppable"
  placeholder="Droppable"
  v-model="input"
  @drop="onDrop"
  @dragover="allowDrop"
></v-text-field>

allowDrop(e) {
      e.preventDefault();
}

Here is the codesandbox for your reference.

https://codesandbox.io/s/brave-poitras-w1qwp?file=/src/components/HelloWorld.vue

Upvotes: 1

Related Questions