How to save drag and drop to local storage?

user_19749020 0
Viewed 57

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 class="note">
</div>

javascript
2 Answers

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

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 class="note">
</div>

user_38073650
Related