如何在HTML中保存可拖動的div位置

我是html和javascripts中的新手，並嘗試在我的web應用程序中單擊保存按鈕後保存可拖動的div位置。我的問題是與他人，我使用的WebSocket獲取數據如何在HTML中保存可拖動的div位置

這是我這是從的WebSocket在我創建JavaScript代碼

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創建可拖動的div和他們每個人有點不一樣顯示mac地址並將它們放在html的主體中。

此外，我希望那些可拖動的div位於上次用戶重新訪問我的Web應用程序時的相同位置。

我應該怎麼做和任何建議？

在此先感謝。

PS如果你需要我的CSS代碼或HTML的更多的代碼，我可以編輯

來源

2017-03-20 paulc1111

您可以將div頂部和左側位置保存在本地存儲器中 –

若要保存超過瀏覽器壽命的任何信息，或者連接到您的套接字需要使用數據庫。另一個選項可能是cookies，但這需要用戶從同一臺機器和瀏覽器訪問該頁面。如果在節點服務器上的Web套接字上託管，則使用MongoDB會很受歡迎。 – Matt

Sun Vs提到了本地存儲。只有當您不需要通過使用瀏覽器會話保存的值時，此功能纔有效。也就是說，一旦用戶關閉Chrome（或任何其他瀏覽器），這些數據將永遠丟失。 – Matt

使用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';

來源

2017-03-20 05:03:31

那麼應該將此代碼添加到上面的代碼中？ – paulc1111

如何在HTML中保存可拖動的div位置

回答

相關問題