<script>
export default {
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.innerText)
    },
    handleDragEnd(event) {
      // 可以在这里添加拖拽结束后的逻辑
    },
    handleDragOver(event) {
      event.dataTransfer.dropEffect = 'move'
    },
    handleDrop(event) {
      const text = event.dataTransfer.getData('text/plain')
      event.target.appendChild(document.getElementById(text))
    },
  },
}
</script>

<template>
  <div>
    <div
      class="draggable-item"
      draggable="true"
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
    >
      拖拽我到购物车
    </div>
    <div
      class="shopping-cart"
      @dragover.prevent="handleDragOver"
      @drop="handleDrop"
    >
      购物车
    </div>
  </div>
</template>

<style>
.draggable-item {
  width: 200px;
  height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
  margin-bottom: 10px;
  cursor: move;
}

.shopping-cart {
  width: 200px;
  height: 100px;
  background-color: #ffcc00;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 100px;
  margin-top: 10px;
}
</style>
