44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
// 获取需要拖动的元素
|
|
var draggableElement = document.getElementById('STCamera201');
|
|
|
|
// 定义变量用于存储鼠标位置和元素偏移量
|
|
var mouseX = 0;
|
|
var mouseY = 0;
|
|
var offsetX = 0;
|
|
var offsetY = 0;
|
|
|
|
// 鼠标按下时触发的事件
|
|
function onMouseDown(event) {
|
|
// 记录鼠标位置和元素偏移量
|
|
mouseX = event.clientX;
|
|
mouseY = event.clientY;
|
|
var rect = draggableElement.getBoundingClientRect();
|
|
offsetX = mouseX - rect.left;
|
|
offsetY = mouseY - rect.top;
|
|
|
|
// 绑定鼠标移动和鼠标释放事件
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
}
|
|
|
|
// 鼠标移动时触发的事件
|
|
function onMouseMove(event) {
|
|
// 计算新的元素位置
|
|
var newMouseX = event.clientX;
|
|
var newMouseY = event.clientY;
|
|
var newLeft = newMouseX - offsetX;
|
|
var newTop = newMouseY - offsetY;
|
|
|
|
// 更新元素位置
|
|
draggableElement.setAttribute('transform', 'translate(' + newLeft + ', ' + newTop + ')');
|
|
}
|
|
|
|
// 鼠标释放时触发的事件
|
|
function onMouseUp(event) {
|
|
// 解绑鼠标移动和鼠标释放事件
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
}
|
|
|
|
// 绑定鼠标按下事件
|
|
draggableElement.addEventListener('mousedown', onMouseDown); |