如何将拖拽元素的位置保存到localStorage？

要解决拖拽位置无法保存的问题，只需在拖拽结束时将位置存入localStorage，并在页面加载时读取存储的位置恢复方块状态，同时修正坐标计算的小问题。以下是修改后的完整代码：

修改后的JavaScript代码 #

let drag = document.querySelector('.note');

// 页面加载时恢复保存的位置
const savedPos = localStorage.getItem('notePosition');
if (savedPos) {
  const { left, top } = JSON.parse(savedPos);
  drag.style.position = 'absolute';
  drag.style.left = left;
  drag.style.top = top;
}

drag.onmousedown = function(e) {
  let coord = getCoord(drag);
  let shiftX = e.pageX - coord.left;
  let shiftY = e.pageY - coord.top;
  drag.style.position = 'absolute';
  document.body.appendChild(drag);
  moveNote(e);
  drag.style.zIndex = 1000;

  function moveNote(e) {
    drag.style.left = e.pageX - shiftX + 'px';
    drag.style.top = e.pageY - shiftY + 'px';
  }
  document.onmousemove = function(e) {
    moveNote(e);
  };
  drag.onmouseup = function() {
    document.onmousemove = null;
    drag.onmouseup = null;
    // 拖拽结束时保存位置到localStorage
    localStorage.setItem('notePosition', JSON.stringify({
      left: drag.style.left,
      top: drag.style.top
    }));
  };
}

// 修正坐标计算：加上滚动偏移，避免页面滚动后拖拽偏移
function getCoord(elem) {
  let main = elem.getBoundingClientRect();
  return {
    top: main.top + window.scrollY,
    left: main.left + window.scrollX
  };
}

CSS代码（无修改） #

.note {
  width: 50px;
  height: 50px;
  background: red;
}

HTML代码（无修改） #

<div class="note"></div>

关键修改说明 #

• 页面初始化恢复位置：读取localStorage中存储的notePosition，如果存在则直接设置方块的定位和坐标，确保刷新页面后位置不变。
• 拖拽结束保存位置：在mouseup事件触发时，将当前方块的left和top样式序列化为JSON字符串存入localStorage。
• 坐标计算优化：原getCoord函数仅获取视口坐标，加上window.scrollY和window.scrollX后，计算的偏移量会考虑页面滚动情况，避免滚动后拖拽出现位置偏差。

内容的提问来源于stack exchange，提问作者Alexander