如何在拖拽元素时获取元素的位置值

// 获取需要拖拽的元素
var draggableElement = document.getElementById('draggable');

// 定义全局变量保存鼠标位置和元素初始位置
var mouseOffset = { x: 0, y: 0 };
var initialPosition = { x: 0, y: 0 };

// 添加鼠标按下事件监听器
draggableElement.addEventListener('mousedown', function(e) {
  // 记录鼠标位置和元素初始位置
  mouseOffset.x = e.clientX;
  mouseOffset.y = e.clientY;
  initialPosition.x = draggableElement.offsetLeft;
  initialPosition.y = draggableElement.offsetTop;
  
  // 添加文档上的鼠标移动事件监听器
  document.addEventListener('mousemove', onMouseMove);
});

// 定义鼠标移动事件处理函数
function onMouseMove(e) {
  // 计算鼠标位置的差值，并加上元素初始位置
  var deltaX = e.clientX - mouseOffset.x;
  var deltaY = e.clientY - mouseOffset.y;
  var newPositionX = initialPosition.x + deltaX;
  var newPositionY = initialPosition.y + deltaY;
  
  // 更新元素位置
  draggableElement.style.left = newPositionX + 'px';
  draggableElement.style.top = newPositionY + 'px';
}

// 添加鼠标抬起事件监听器
document.addEventListener('mouseup', function() {
  // 移除文档上的鼠标移动事件监听器
  document.removeEventListener('mousemove', onMouseMove);
});