<template> <div class="drag-page"> <!-- 左侧画布 --> <div class="canvas" @dragover.prevent @drop="onDrop"> <div v-for="item in canvasItems" :key="item.id" class="canvas-btn" :style="{ left: item.x + 'px', top: item.y + 'px' }" @mousedown.stop="(e) => startMove(e, item)" @contextmenu.prevent="(e) => openContextMenu(e, item)" > {{ item.label }} </div> </div> <!-- 右侧按钮库 --> <div class="button-group"> <div v-for="btn in buttonLib" :key="btn.id" class="lib-btn" draggable="true" @dragstart="(e) => startDragLib(e, btn)" > {{ btn.label }} </div> </div> <!-- 右键菜单 --> <div v-if="contextMenu.show" class="context-menu" :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }" > <div class="menu-item" @click="handleEdit">编辑</div> <div class="menu-item" @click="handleDelete">删除</div> </div> <!-- 编辑弹窗 --> <el-dialog v-model="editVisible" title="编辑按钮" width="400px"> <el-input v-model="currentItem.label" placeholder="请输入按钮文字" /> <template #footer> <el-button @click="editVisible = false">取消</el-button> <el-button type="primary" @click="editVisible = false">确定</el-button> </template> </el-dialog> </div> </template> <script setup> import { ref, reactive } from 'vue' // 按钮库 const buttonLib = ref([ { id: 1, label: '确定' }, { id: 2, label: '取消' }, { id: 3, label: '编辑' }, { id: 4, label: '删除' }, ]) // 画布上的按钮 const canvasItems = ref([]) let dragItem = null // 拖拽右侧到左侧 function startDragLib(e, btn) { dragItem = btn } function onDrop(e) { if (!dragItem) return canvasItems.value.push({ id: Date.now(), label: dragItem.label, x: e.offsetX - 40, y: e.offsetY - 15, }) dragItem = null } // 画布内拖动 let moving = null let startX = 0 let startY = 0 function startMove(e, item) { moving = item startX = e.clientX - item.x startY = e.clientY - item.y document.addEventListener('mousemove', movingHandler) document.addEventListener('mouseup', stopMove) } function movingHandler(e) { if (!moving) return moving.x = e.clientX - startX moving.y = e.clientY - startY } function stopMove() { moving = null document.removeEventListener('mousemove', movingHandler) document.removeEventListener('mouseup', stopMove) } // 右键菜单 const contextMenu = reactive({ show: false, x: 0, y: 0, }) const currentItem = ref(null) const editVisible = ref(false) // 打开右键菜单 function openContextMenu(e, item) { currentItem.value = item contextMenu.x = e.clientX contextMenu.y = e.clientY contextMenu.show = true // 点击别处关闭 document.addEventListener('click', closeContextMenu) } // 关闭菜单 function closeContextMenu() { contextMenu.show = false document.removeEventListener('click', closeContextMenu) } // 编辑 function handleEdit() { editVisible.value = true closeContextMenu() } // 删除 function handleDelete() { if (!currentItem.value) return canvasItems.value = canvasItems.value.filter( (i) => i.id !== currentItem.value.id ) closeContextMenu() } </script> <style scoped> .drag-page { display: flex; gap: 20px; padding: 20px; height: 600px; } .canvas { flex: 1; border: 2px dashed #ccc; background: #f9f9f9; position: relative; overflow: hidden; } .canvas-btn { position: absolute; padding: 6px 14px; background: #409eff; color: #fff; border-radius: 4px; cursor: move; user-select: none; white-space: nowrap; } .button-group { width: 180px; display: flex; flex-direction: column; gap: 10px; } .lib-btn { padding: 10px; border: 1px solid #ddd; background: #fff; text-align: center; cursor: grab; } /* 右键菜单样式 */ .context-menu { position: fixed; z-index: 9999; width: 120px; background: #fff; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); overflow: hidden; } .menu-item { padding: 8px 12px; cursor: pointer; } .menu-item:hover { background: #f5f5f5; } </style>
