Vuetify - 将值从芯片拖放到输入端不起作用

Question

我有几个 v-chip 元素和一个 form。我正在尝试允许用户将任何筹码拖放到表单中的任何位置，以便表单 input 将具有筹码值。

这是我到目前为止所做的（简化）：

 <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>

当棋子被拖动时，它的值被存储在draggedData中。在将其“丢弃”到某些输入后，输入应该具有 draggedData 值，但它并没有发生。

你知道要做什么吗？拖动有效 - 放下无效

Answer 1

需要在ondragover事件中使用prevent default来阻止一个元素掉落到另一个元素。

方式 01:

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

方式 02:

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

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

这里是codesandbox供大家参考。

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

Vuetify - 将值从芯片拖放到输入端不起作用

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

javascript

drag-and-drop

vue.js

vuetify.js