// 获取需要拖动的元素 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);