Javascript获取div的X和Y位置并存储它们，并在不同场景中恢复位置_Javascript_Positioning_Window Resize

Javascript获取div的X和Y位置并存储它们，并在不同场景中恢复位置

javascript

Javascript获取div的X和Y位置并存储它们，并在不同场景中恢复位置,javascript,positioning,window-resize,Javascript,Positioning,Window Resize,以下是我的设想：我正在尝试存储一个div位置X和Y。我需要在页面刷新/重新加载时恢复div的位置，并且需要确保在调整窗口大小时该div应可见下面是我的代码： <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center;

以下是我的设想：

我正在尝试存储一个div位置X和Y。我需要在页面刷新/重新加载时恢复div的位置，并且需要确保在调整窗口大小时该div应可见

下面是我的代码：

<!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>


#mydiv{
位置：绝对位置；
z指数：9；
背景色：#f1f1；
文本对齐：居中；
边框：1px实心#D3；
}
#mydivheader{
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}
可拖动DIV元素
在移动DIV元素时，单击并按住鼠标按钮
单击此处移动
移动
这个
DIV
//存储当前窗口高度和宽度
setItem（“oldscreen”，JSON.stringify({
x:window.innerWidth，
y:窗高
}));
//窗口调整列表器
window.addEventListener（“调整大小”，（）=>{
var my_div=document.getElementById（“mydiv”）；
var old_x=我的分区偏移量left；
var old_y=我的分区偏移；
var new_window_width=window.innerWidth；
var new_window_height=window.innerHeight；
var stored_window_position=JSON.parse（localStorage.getItem（“oldscreen”）；
var new_x=（旧_x*新_窗口宽度）/存储的_窗口位置.x；
var new_y=（旧的_y*新的_窗口高度）/存储的_窗口位置.y；
my_div.style.left=新的_x+‘px’；
my_div.style.top=新的_y+‘px’；
localStorage.setItem（“oldscreen”，
JSON.stringify({
x:window.innerWidth，
y:窗高
})
)
});
//检查存储位置是否存在
if（localStorage.getItem（“位置”））{
var mydiv=document.getElementById（“mydiv”）；
var storaged_position=JSON.parse（localStorage.getItem（“position”）；
mydiv.style.left=存储的_位置.x+'px'；
mydiv.style.top=存储的_位置.y+'px'；
}
//使DIV元素成为draggagle：
DrageElement（document.getElementById（“mydiv”）；
功能牵引装置（elmnt）{
var pos1=0，
pos2=0，
pos3=0，
pos4=0；
if（document.getElementById（elmnt.id+“header”））{
/*如果存在，则标题是从中移动DIV的位置：*/
document.getElementById（elmnt.id+“header”）.onmousedown=dragMouseDown；
}否则{
/*否则，请从DIV内的任何位置移动DIV：*/
elmnt.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
//计算新光标位置：
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
//设置元素的新位置：
elmnt.style.top=（elmnt.offsetTop-pos2）+“px”；
elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”；
}
函数closeDrageElement（）{
//我的div的存储位置
setItem（“位置”，JSON.stringify({
x:elmnt.offsetLeft，
y:elmnt.offsetTop
}));
/*释放鼠标按钮时停止移动：*/
document.onmouseup=null；
document.onmousemove=null；
}
}

我有以下疑问：

我是否正确存储div位置

如果是，调整窗口大小时，div的位置不正确。它从屏幕上消失了。我需要确保这个div应该对用户可见，即使窗口大小是调整大小的

请建议我应该怎么做

您不应该存储可移动的div位置，而不是窗口的宽度和高度吗？我看不到实际还原位置的代码。是的，div位置正确存储在本地存储上，请参阅本文检查div是否在视口内：这篇文章是关于第二个问题：检查div是否在视口内，位置是否正确存储，第56行的“'）除外。就像你提到的，屏幕大小也会被存储，也许他会用它来比较onLoad和检查屏幕大小是否改变。