修复第7条需求:确保拖动Panel标题栏能移动Area

This commit is contained in:
zqm
2025-11-04 14:34:40 +08:00
parent d9cd0518ca
commit 6c724b5903
3 changed files with 30 additions and 5 deletions

View File

@@ -58,7 +58,7 @@
</template> </template>
<script setup> <script setup>
import { defineProps, computed, defineEmits, ref, onMounted } from 'vue' import { defineProps, computed, defineEmits, ref, onMounted, watch } from 'vue'
const props = defineProps({ const props = defineProps({
id: { type: String, required: true }, id: { type: String, required: true },
@@ -99,6 +99,19 @@ const parentContainer = ref(null)
// 根据本地状态计算是否最大化 // 根据本地状态计算是否最大化
const isMaximized = computed(() => localState.value === '最大化' || localState.value === 'maximized') const isMaximized = computed(() => localState.value === '最大化' || localState.value === 'maximized')
// 监听props位置变化更新原始位置
watch(() => props.left, (newLeft) => {
if (newLeft !== undefined && newLeft !== originalPosition.value.left) {
originalPosition.value.left = newLeft
}
}, { immediate: true })
watch(() => props.top, (newTop) => {
if (newTop !== undefined && newTop !== originalPosition.value.top) {
originalPosition.value.top = newTop
}
}, { immediate: true })
// 根据状态计算尺寸和位置样式 // 根据状态计算尺寸和位置样式
const areaStyle = computed(() => { const areaStyle = computed(() => {
if (isMaximized.value) { if (isMaximized.value) {

View File

@@ -195,6 +195,7 @@ const onPanelDragStart = (areaId, event) => {
x: area.x, x: area.x,
y: area.y y: area.y
} }
console.log('Panel拖拽开始移动Area:', areaId)
} }
} }
@@ -223,12 +224,16 @@ const onPanelDragMove = (areaId, event) => {
// 更新位置 // 更新位置
area.x = newLeft area.x = newLeft
area.y = newTop area.y = newTop
// 调试信息
console.log('Panel拖拽移动Area新位置:', { x: newLeft, y: newTop })
} }
} }
} }
// Panel拖拽结束 // Panel拖拽结束
const onPanelDragEnd = () => { const onPanelDragEnd = () => {
console.log('Panel拖拽结束')
panelDragState.value.isDragging = false panelDragState.value.isDragging = false
panelDragState.value.currentAreaId = null panelDragState.value.currentAreaId = null
} }

View File

@@ -126,12 +126,15 @@ const onDragStart = (e) => {
// 只有当点击的是标题栏区域(不是按钮)时才触发拖拽 // 只有当点击的是标题栏区域(不是按钮)时才触发拖拽
if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) { if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) {
isDragging = true; isDragging = true;
// 传递panelId和鼠标位置
emit('dragStart', { emit('dragStart', {
clientX: e.clientX, clientX: e.clientX,
clientY: e.clientY clientY: e.clientY,
panelId: props.id
}); });
// 防止文本选择 // 防止文本选择和默认行为
e.preventDefault(); e.preventDefault();
e.stopPropagation();
// 将鼠标移动和释放事件绑定到document确保拖拽的连续性 // 将鼠标移动和释放事件绑定到document确保拖拽的连续性
document.addEventListener('mousemove', onDragMove); document.addEventListener('mousemove', onDragMove);
@@ -143,9 +146,13 @@ const onDragStart = (e) => {
// 拖拽移动 // 拖拽移动
const onDragMove = (e) => { const onDragMove = (e) => {
if (isDragging) { if (isDragging) {
// 防止文本选择和默认行为
e.preventDefault();
e.stopPropagation();
emit('dragMove', { emit('dragMove', {
clientX: e.clientX, clientX: e.clientX,
clientY: e.clientY clientY: e.clientY,
panelId: props.id
}); });
} }
}; };
@@ -154,7 +161,7 @@ const onDragMove = (e) => {
const onDragEnd = () => { const onDragEnd = () => {
if (isDragging) { if (isDragging) {
isDragging = false; isDragging = false;
emit('dragEnd'); emit('dragEnd', { panelId: props.id });
// 拖拽结束后移除事件监听器 // 拖拽结束后移除事件监听器
document.removeEventListener('mousemove', onDragMove); document.removeEventListener('mousemove', onDragMove);