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

Question

我想知道是否/如何id能夠存儲我在哪裏移動可拖動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

你真的想把它存儲在數據庫中嗎？用戶可以擁有許多設備，因此您的站點佈局（因此div的位置）是不同的。

考慮將其存儲在本地存儲或Cookie中（your example）。

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 
} 

Answer 2

無論你在數據庫中存儲，你將不得不使用Ajax與服務器（Web服務器上進行通信如PHP腳本）將與數據庫交互。 JavaScript本身不能與數據庫交互。

在這裏你可以找到W3C網頁談論的Ajax：http://www.w3schools.com/ajax/

注重像IE瀏覽器的一些不同的方法，一些版本的嚴重支持XmlHttpRequest對象是Ajax的基本對象。

在你的情況下，根據你想要做什麼，你可以只存儲div的位置，然後在頁面加載時爲數據庫檢索它。另一個解決方法，我認爲更加骯髒的是將整個HTML頁面保存在數據庫中。 Ajax能夠發送並返回幾種類型的數據，比如JSON，原始文本，XML，還有可以直接注入到div或其他內容中的現成的HTML。

希望它可以幫助

編輯：請注意，如果你想大量的數據發送到服務器，你將不得不使用POST方法，這不是大小的限制，而不是GET方法。 GET只會發送div的位置，但如果發送完整頁面則需要POST。 See here瞭解更多詳情。