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等浏览器上的不同方法，有些版本严重支持作为Ajax基础对象的XmlHttpRequest对象。

在您的情况下，根据您要执行的操作，您只能存储div的位置，然后在页面加载时检索数据库的位置。另一个解决方案，我认为更脏，是将整个HTML页面保存在数据库中。 Ajax能够发送和带回几种类型的数据，例如JSON，原始文本，XML，以及可以在div或其他任何内容中注入的即用型HTML。

希望有所帮助

编辑：请注意，如果要将大量数据发送到服务器，则必须使用POST方法，而不是GET方法，该方法不受大小限制。 GET只能发送div的位置，但如果发送整页则需要POST。 See here了解更多详情。

Answer 2

您真的想将其存储在数据库中吗？用户可以拥有许多设备，您的站点布局（以及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
}

将可拖动DIV的位置存储到MySQL数据库

2 个答案: