vue3 拖拽生成页面如何实现简单示例

Vue3实现拖拽生成页面功能通常需要结合HTML5的Drag and Drop API以及一些前端库如Vuedraggable、vue-drag-resize等。以下是一个简单的示例：

首先，安装所需库：

npm install vuedraggable vue-drag-resize

然后，在你的Vue组件中引入并使用`vuedraggable`：

<template>
  <div id="draggableItems" class="draggable-container">
    <div v-for="(item, index) in items" :key="index" draggable v-model="items" :move="updatePosition">
      <div :style="{ left: item.left + 'px', top: item.top + 'px' }">{{ item.content }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from 'vue';
import Vuedraggable from 'vuedraggable';

const items = ref([{ content: 'Item 1', left: 0, top: 0 }]);
const dragContainer = new Vuedraggable({
  el: '#draggableItems',
  group: '__group__', // 如果有多个拖放区域，设置相同的group
  drag: {
    delayOnStart: true,
  },
});

function updatePosition({ index, position }) {
  const item = items.value[index];
  item.left = position.x;
  item.top = position.y;
}

onMounted(() => {
  // 初始化拖动容器
  dragContainer.init();
  
  // 监听拖放事件更新元素位置
  watchEffect(() => {
    items.value.forEach((item, index) => {
      item.left = `${dragContainer.items()[index].clientX}px`;
      item.top = `${dragContainer.items()[index].clientY}px`;
    });
  });
</script>

<style scoped>
.draggable-container {
  display: flex;
  flex-wrap: wrap;
}
</style>

这个例子中，我们创建了一个可拖动的列表项，当用户拖动时，会触发`updatePosition`函数来改变元素的位置，并实时更新元素样式。