修复第7条需求:确保拖动Panel标题栏能移动Area
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user