Area标题栏支持拖拽

This commit is contained in:
zqm
2026-01-16 16:31:18 +08:00
parent e060f9272a
commit e5027789ad

View File

@@ -444,8 +444,55 @@ const onDragStart = (e) => {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
})
// 添加鼠标移动和释放事件监听器
const handleMouseMove = (moveEvent) => {
// 计算移动距离
const deltaX = moveEvent.clientX - dragStartPos.value.x
const deltaY = moveEvent.clientY - dragStartPos.value.y
// 更新位置
const newLeft = areaStartPos.value.x + deltaX
const newTop = areaStartPos.value.y + deltaY
// 更新原始位置
originalPosition.value.left = newLeft
originalPosition.value.top = newTop
// 发送拖拽移动事件
emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
dragId: currentDragId.value,
areaId: props.id,
position: { x: moveEvent.clientX, y: moveEvent.clientY },
left: newLeft,
top: newTop,
timestamp: Date.now()
}, {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
})
}
const handleMouseUp = () => {
// 调用拖拽结束方法
onDragEnd({
dragId: currentDragId.value,
finalPosition: {
x: originalPosition.value.left || 0,
y: originalPosition.value.top || 0
},
areaId: props.id
})
// 清理事件监听器
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
}
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
// 防止文本选择
e.preventDefault()
e.stopPropagation()
}
// 拖拽移动 - 处理事件总线的area.drag.move事件