保存拖动元素的位置- JavaScript

// 获取被拖动元素
var draggableElement = document.getElementById('draggable');

// 初始化位置变量
var offsetX = 0;
var offsetY = 0;

// 监听鼠标按下事件
draggableElement.addEventListener('mousedown', function(event) {
  // 计算鼠标相对于被拖动元素的位置偏移量
  offsetX = event.clientX - draggableElement.offsetLeft;
  offsetY = event.clientY - draggableElement.offsetTop;
});

// 监听鼠标移动事件
document.addEventListener('mousemove', function(event) {
  // 计算被拖动元素的新位置
  var newX = event.clientX - offsetX;
  var newY = event.clientY - offsetY;

  // 更新元素位置
  draggableElement.style.left = newX + 'px';
  draggableElement.style.top = newY + 'px';
});

// 监听鼠标释放事件
document.addEventListener('mouseup', function(event) {
  // 保存最终的元素位置信息
  var finalX = event.clientX - offsetX;
  var finalY = event.clientY - offsetY;

  // 在这里可以将最终的位置信息发送到服务器或进行其他操作
});