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

【问题标题】：How can I save draggable div positions in html如何在 html 中保存可拖动的 div 位置
【发布时间】：2017-03-20 04:49:11
【问题描述】：

我是 html 和 javascripts 的新手，并在我的 Web 应用程序中单击保存按钮后尝试保存我的可拖动 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 代码，我可以编辑

【问题讨论】：

您可以将div的顶部和左侧位置保存在本地存储中
要保存比浏览器或套接字连接更长的任何信息，需要使用数据库。另一种选择可能是 cookie，但这需要用户从同一台机器和浏览器访问该页面。如果在节点服务器上的 Web 套接字上托管，则使用 MongoDB 很受欢迎。
Sun Vs 提到了本地存储。仅当您不需要通过使用浏览器会话保存的值时，这才有效。又名，一旦用户关闭 Chrome（或任何其他浏览器），这些数据就会永远丢失。
@Matt 我认为您将 localStorage 与 sessionStorage 混淆了。
我错了，我所描述的是 sessionStorage。这是两者描述的链接。应该考虑对 localStorage 的限制。 www.w3schools.com/html/html5_webstorage.asp

标签： javascript html position draggable

【解决方案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';

【讨论】：