在Vue 3中可拖动不会显示值

在Vue 3中，可拖动的元素不会直接显示其值。这是因为Vue 3中的可拖动功能是通过使用HTML5的拖放API实现的，而该API并不直接提供显示值的功能。

要在Vue 3中实现可拖动元素的值显示，可以通过以下步骤进行：

1. 在Vue组件中，使用v-model指令绑定一个数据属性来存储可拖动元素的值。例如，可以创建一个名为dragValue的数据属性。

data() {
  return {
    dragValue: ''
  }
}

1. 在可拖动元素上设置draggable属性为true，并绑定dragstart事件和一个方法来处理拖动开始时的逻辑。

<div draggable="true" @dragstart="dragStart">可拖动元素</div>

1. 在Vue组件的方法中，定义dragStart方法来处理拖动开始时的逻辑。在该方法中，可以通过event.dataTransfer.setData()方法设置拖动数据，并将其值设置为dragValue。

methods: {
  dragStart(event) {
    event.dataTransfer.setData('text/plain', this.dragValue);
  }
}

1. 在需要显示拖动值的目标区域上，绑定dragover和drop事件，并定义相应的方法来处理拖动值的显示。

<div @dragover="dragOver" @drop="drop">目标区域</div>

1. 在Vue组件的方法中，定义dragOver方法来处理拖动元素在目标区域上方时的逻辑。在该方法中，需要调用event.preventDefault()方法来阻止默认的拖放行为。

methods: {
  dragOver(event) {
    event.preventDefault();
  }
}

1. 在Vue组件的方法中，定义drop方法来处理拖动元素放置到目标区域时的逻辑。在该方法中，可以通过event.dataTransfer.getData()方法获取拖动的值，并将其赋值给dragValue。

methods: {
  drop(event) {
    event.preventDefault();
    this.dragValue = event.dataTransfer.getData('text/plain');
  }
}

通过以上步骤，就可以在Vue 3中实现可拖动元素的值显示。当拖动元素被放置到目标区域时，目标区域将显示拖动元素的值。

对于Vue 3中可拖动的实现，腾讯云没有直接相关的产品或产品介绍链接。但腾讯云提供了丰富的云计算服务和解决方案，可以帮助开发者构建和部署各种类型的应用程序。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多信息。