How to save drag and drop to local storage?-CodePudding

I'm just learning JavaScript. There is a code that can move the block. But I can't save it in localStorage. Help!

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 >
</div>

CodePudding user response：

This seems like very simple process.

On mouse up, get the left and top properties and save their values to localStorage:

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];
}

Or the quicker way

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];
}

CodePudding user response：

You can save the location using localStorge.setItem("key", "value") and load the item using localStorge.getItem("key"). So we save the JSON representation of our location object. We do that when mouse is up. But also not forgetting to load the value first on page load.

Note: This won't work in this sandbox environment.

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 >
</div>