修复Panel标题栏拖拽移动Area功能:将拖拽事件绑定到document上以确保拖拽连续性
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user