用vue写一个拖拉拽生成div的页面

当然可以！下面是一个使用Vue.js来创建一个拖拽生成div的页面的简单示例：

<template>
  <div class="drag-container">
    <div
      class="drag-item"
      v-for="(item, index) in items"
      :key="index"
      :style="{ top: item.top + 'px', left: item.left + 'px' }"
      @mousedown="startDrag(index, $event)"
      @mouseup="stopDrag"
      @mousemove="drag($event)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Div 1', top: 100, left: 100 },
        { text: 'Div 2', top: 200, left: 200 },
        { text: 'Div 3', top: 300, left: 300 }
      ],
      isDragging: false,
      dragIndex: null,
      startX: 0,
      startY: 0
    };
  },
  methods: {
    startDrag(index, event) {
      this.isDragging = true;
      this.dragIndex = index;
      this.startX = event.clientX;
      this.startY = event.clientY;
    },
    stopDrag() {
      this.isDragging = false;
      this.dragIndex = null;
    },
    drag(event) {
      if (this.isDragging) {
        const offsetX = event.clientX - this.startX;
        const offsetY = event.clientY - this.startY;
        this.items[this.dragIndex].left += offsetX;
        this.items[this.dragIndex].top += offsetY;
        this.startX = event.clientX;
        this.startY = event.clientY;
      }
    }
  }
};
</script>

<style>
.drag-container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}

.drag-item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f3f3f3;
  border: 1px solid #999;
  cursor: move;
}
</style>

在这个示例中，我们使用了Vue的响应式数据来存储生成的div的位置信息。通过鼠标的mousedown、mouseup和mousemove事件，我们可以实现拖拽效果。当鼠标按下时，记录起始位置和当前拖拽的div的索引，然后在mousemove事件中计算鼠标的偏移量，并更新对应div的位置信息。

希望这个示例对你有所帮助！如果有任何问题，请随时提问。