Question

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

这是我的可拖动div，它是从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创建了divTags，每个都显示了mac地址并将它们放在html的主体中。

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

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

提前致谢。

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

Answer 1

使用localStorage

保存

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位置

1 个答案: