如何在 html 中保存可拖动的 div 位置

Question

我是 html 和 javascript 的新手，在我的网络应用程序中单击保存按钮后，我试图保存我的可拖动 div 位置。我的问题与我使用 Websocket 获取数据的其他问题略有不同

这是我的可拖动 divs，它是在 javascript 代码

中从 websocket 创建的

function WebSocket(){
  if ("WebSocket" in window){
    var channel = "hello";
    var socket = io.connect("my socket address here");

    socket.on(channel, function (d) {
      var data = JSON.parse(d);
      console.log(channel + " : " + d);
      var theDiv = document.getElementById(data.node_info[1].info.mac);
      if(theDiv == null) {
        var divTag = document.createElement("div");
        divTag.id = data.node_info[1].info.mac;   //"drag1"
        divTag.className = "draggable js-drag";
        divTag.innerHTML = data.node_info[1].info.mac;
        document.getElementsByTagName('body')[0].appendChild(divTag);
        //document.getElementsByName('scroll_div')[0].appendChild(divTag);
        //$('#'+data.node_info[1].info.mac).load('#'+data.node_info[1].info.mac);
      }
    });
    socket.on('crc_err', function(packet){
      console.log("crc_err : " + packet);
    });
    socket.on('type_err', function(packet){
      console.log("type_err : " + packet);
    });
  } else{
    // The browser doesn't support WebSocket
    // alert("WebSocket NOT supported by your Browser!");
  }
}

我用 id, className, innerHTML 创建了 div 标签，每个标签都显示 mac 地址并将它们放在 html 的正文中。

此外，我希望那些可拖动的 divs 与上次用户重新访问我的网络应用程序时位于相同的位置。

我该怎么办，有什么建议吗？？

提前致谢。

p.s 如果您需要我的 css 代码或 html 的更多代码，我可以 EDIT

Answer 1

使用本地存储

保存

localStorage.setItem(divTag.id + '-X', leftPosition);
localStorage.setItem(divTag.id + '-Y', topPosition);

加载回来

divTag.style.left = localStorage.getItem(divTag.id + '-X') + 'px';
divTag.style.top = localStorage.getItem(divTag.id + '-Y') + 'px';

如何在 html 中保存可拖动的 div 位置

How can I save draggable div positions in html

html

javascript

position

draggable