修复Panel标题栏拖拽移动Area功能:将拖拽事件绑定到document上以确保拖拽连续性

This commit is contained in:
zqm
2025-11-04 11:08:34 +08:00
parent debc3fb880
commit 3123610296

View File

@@ -4,10 +4,7 @@
<div class="flex flex-col h-full">
<!-- 标题栏 -->
<div class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none cursor-move"
@mousedown="onDragStart"
@mousemove="onDragMove"
@mouseup="onDragEnd"
@mouseleave="onDragEnd">
@mousedown="onDragStart">
<div class="flex items-center">
<span class="text-xs">{{ title }}</span>
</div>
@@ -135,6 +132,11 @@ const onDragStart = (e) => {
});
// 防止文本选择
e.preventDefault();
// 将鼠标移动和释放事件绑定到document确保拖拽的连续性
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
document.addEventListener('mouseleave', onDragEnd);
}
};
@@ -153,6 +155,11 @@ const onDragEnd = () => {
if (isDragging) {
isDragging = false;
emit('dragEnd');
// 拖拽结束后移除事件监听器
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
document.removeEventListener('mouseleave', onDragEnd);
}
};
</script>