如何将拖放保存到本地存储？

Question

如何将拖放保存到本地存储？

3

我正在学习JavaScript。有一段代码可以移动块，但我无法将其保存在localStorage中。求助！

let drag = document.querySelector('.note');
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;
  };
}

function getCoord(elem) {
  let main = elem.getBoundingClientRect();
  return {
    top: main.top,
    left: main.left
  };
}

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

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

- Alexander

你想保存它的位置（序列化为字符串）吗？ - IT goldman

我希望当我将块移动到页面上的任何位置时，在重新加载页面后，该块仍保持在我移动它的同一位置。 - Alexander

@Alexander 我会向你展示如何在JavaScript中保存坐标。 - Parking Master

@停车大师，你会如何向我展示？ - Alexander

@Alexander，请查看下面的答案。 - Parking Master

2个回答

1

您可以使用 localStorge.setItem("key", "value") 来保存位置，并使用 localStorge.getItem("key") 加载项目。因此，我们保存位置对象的 JSON 表示。我们是在鼠标抬起时进行操作的。但也不要忘记在页面加载时先加载值。

注意：这在此沙盒环境中不起作用。

let drag = document.querySelector('.note');
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';

    var position = {
      x: drag.style.left,
      y: drag.style.top
    }

    localStorage.setItem("last-position", JSON.stringify(position))
  }
  document.onmousemove = function(e) {
    moveNote(e);
  };
  drag.onmouseup = function() {
    document.onmousemove = null;
    drag.onmouseup = null;
  };
}

function getCoord(elem) {
  let main = elem.getBoundingClientRect();
  return {
    top: main.top,
    left: main.left
  };
}

window.onload = function() {
  var str_position = localStorage.getItem("last-position") || "{x:0, y:0}"
  var position = JSON.parse(str_position);

  drag.style.left = position.x;
  drag.style.top = position.y;
  drag.style.position = 'absolute';
  document.body.appendChild(drag);
  drag.style.display = 'block'
}

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

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

- IT goldman

非常感谢！现在还没有足够的知识来理解该写什么。但是现在我将有不同的示例来看到代码可以更大更多样化。 - Alexander

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Parking Master · Accepted Answer

这似乎是一个非常简单的过程。

在鼠标抬起时，获取 `left` 和 `top` 属性，并将它们的值保存到本地存储中：

document.addEventListener("mouseup", () => {
  localStorage.setItem("top", drag.style.top);
  localStorage.setItem("left", drag.style.top);
});
let coordinates = localStorage["top"] + "," + localStorage["left"];
if (localStorage["top"] && localStorage["left"]) {
  drag.style.top = coordinates.split(",")[0];
  drag.style.left = coordinates.split(",")[1];
}

或者更快的方式

document.addEventListener("mouseup", () => {
  localStorage.setItem("coordinates", drag.style.top + "," + drag.style.left);
});
let coordinates = localStorage["coordinates"];
if (localStorage["coordinates"]) {
  drag.style.top = coordinates.split(",")[0];
  drag.style.left = coordinates.split(",")[1];
}