Area标题栏支持拖拽
This commit is contained in:
@@ -444,8 +444,55 @@ const onDragStart = (e) => {
|
|||||||
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
|
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.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 拖拽移动 - 处理事件总线的area.drag.move事件
|
// 拖拽移动 - 处理事件总线的area.drag.move事件
|
||||||
|
|||||||
Reference in New Issue
Block a user