將可拖動DIV的位置存儲到MySQL數據庫

Question

我想知道是否/如何能夠將我將可拖動div移動到屏幕上的位置的位置存儲，以便在重新加載頁面時，它將返回到離開頁面時的位置。

代碼在這里

 function drag_start(event) { var style = window.getComputedStyle(event.target, null); event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY)); } function drag_over(event) { event.preventDefault(); return false; } function drop(event) { var offset = event.dataTransfer.getData("text/plain").split(','); var dm = document.getElementById('dragme'); dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px'; dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px'; event.preventDefault(); return false; } var dm = document.getElementById('dragme'); dm.addEventListener('dragstart',drag_start,false); document.body.addEventListener('dragover',drag_over,false); document.body.addEventListener('drop',drop,false); 

 aside { position: absolute; left: 0; top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */ width: 200px; background: rgba(255,255,255,0.66); border: 2px solid rgba(0,0,0,0.5); border-radius: 4px; padding: 8px; } 

 <aside draggable="true" id="dragme"> This is an aside, drag me. </aside> <p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p> <p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p> <p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage's Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p> <p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.</p> 

Answer 1

無論您要存儲在數據庫中的什么內容，都將不得不使用Ajax與將與數據庫進行交互的服務器（例如Web服務器上的PhP腳本）進行通信。 JavaScript本身無法與數據庫進行交互。

在這里，您可以找到有關Ajax的W3C頁面： http : //www.w3schools.com/ajax/

注意某些瀏覽器（如IE）上的不同方法，某些版本嚴重支持XmlHttpRequest對象，該對象是Ajax基礎對象。

在您的情況下，根據您要執行的操作，您可以僅存儲div的位置，然后在頁面加載時為數據庫檢索它。 另一個解決方案，我認為更骯臟，是將整個HTML頁面保存在數據庫中。 Ajax能夠發送和帶回幾種類型的數據，例如JSON，原始文本，XML，以及可以直接插入div或其他任何內容的即用型HTML。

希望能幫助到你

編輯：請注意，如果要向服務器發送大量數據，則必須使用不受大小限制的POST方法，而不是GET方法。 僅發送div的位置即可使用GET，但是如果發送整個頁面則需要POST。 有關更多詳細信息， 請參見此處 。

Answer 2

您是否真的要將其存儲在數據庫中？ 用戶可以擁有許多設備，這些設備的站點布局（因此div的位置）不同。

考慮將其存儲在本地存儲或Cookie中（ 您的示例 ）。

var pos = {left: dm.style.left, top: dm.style.top};
document.cookie = JSON.stringify(pos);
try {
    var pos = JSON.parse(document.cookie);
    dm.style.left = pos.left ? pos.left : '0px';
    dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
    // Some error handling
}