在没有组件的vue js中拖放

<div id="app">
  <div class="drag-source" draggable="true" @dragstart="dragStart">拖动源</div>
  <div class="drop-target" @dragover="dragOver" @drop="drop">放置目标</div>
</div>

new Vue({
  el: '#app',
  methods: {
    dragStart(event) {
      // 设置拖动的数据
      event.dataTransfer.setData('text/plain', event.target.innerText);
    },
    dragOver(event) {
      // 阻止默认的拖放行为
      event.preventDefault();
    },
    drop(event) {
      // 获取拖动的数据
      const data = event.dataTransfer.getData('text/plain');
      // 在放置目标中处理拖放的数据
      event.target.innerText = data;
    }
  }
});