0

Here is my scenario :

I am trying to store a div position X and Y. I need to restore the position of my div on page refresh/reload as well as i need to make sure that this div should be visible in case of window resize.

Below is my code :

<!DOCTYPE html>
<html>
   <style>
      #mydiv {
      position: absolute;
      z-index: 9;
      background-color: #f1f1f1;
      text-align: center;
      border: 1px solid #d3d3d3;
      }
      #mydivheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: #2196F3;
      color: #fff;
      }
   </style>
   <body>
      <h1>Draggable DIV Element</h1>
      <p>Click and hold the mouse button down while moving the DIV element</p>
      <div id="mydiv">
         <div id="mydivheader">Click here to move</div>
         <p>Move</p>
         <p>this</p>
         <p>DIV</p>
      </div>
      <script>
         // storing current window height and width
      localStorage.setItem("oldscreen", JSON.stringify({
    x: window.innerWidth,
    y: window.innerHeight
}));




//window resize listner

window.addEventListener("resize", () => {
    var my_div = document.getElementById("mydiv");

    var old_x = my_div.offsetLeft;
    var old_y = my_div.offsetTop;
    var new_window_width = window.innerWidth;
    var new_window_height = window.innerHeight;
    var stored_window_position = JSON.parse(localStorage.getItem("oldscreen"));
    var new_x = (old_x * new_window_width) / stored_window_position.x;

    var new_y = (old_y * new_window_height) / stored_window_position.y;
    my_div.style.left = new_x + 'px';
    my_div.style.top = new_y + 'px';
    localStorage.setItem("oldscreen", 
       JSON.stringify({
          x: window.innerWidth,
          y: window.innerHeight
       })
   )

});


// check whether stored position exists
if (localStorage.getItem("position")) {
    var mydiv = document.getElementById("mydiv");
    var stored_position = JSON.parse(localStorage.getItem("position"));
    mydiv.style.left = stored_position.x + 'px';
    mydiv.style.top = stored_position.y + 'px';

}


//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
    var pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
    if (document.getElementById(elmnt.id + "header")) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        //storing position of my div
        localStorage.setItem("position", JSON.stringify({
            x: elmnt.offsetLeft,
            y: elmnt.offsetTop
        }));


        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
    }
}
      </script>
   </body>
</html>

I have following query:

  1. Am i storing the div position correctly.
  2. If yes, While resizing the window position of div is not correct. it goes off the screen. I need to make sure this div should be visible to users even if window size is resize.

Please suggest what should i do

BAHRI Abdelhak
  • 82
  • 8
Riya Mitra
  • 115
  • 1
  • 6
  • Shouldn't you store the movable div position, not the window width and height? I can see no code to actually restore the position. – 2pha Feb 15 '20 at 23:55
  • yeah, div position is correctly stored on local Storage, refer to this article to check if div is inside the viewport : https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/ – BAHRI Abdelhak Feb 15 '20 at 23:56
  • The article was about 2nd question : checking if the div is inside the ViewPort, the position is stored correctly, except a missed ') ' on line 56 . and like you mentionned, the screen size is also stored maybe he will use it to compare onLoad and check if screen size changed. – BAHRI Abdelhak Feb 16 '20 at 00:02

0 Answers0